Composer

Playground

'use client';
import { useState } from 'react';
import { Composer, type ComposerVariant } from '@mbsw/ui';

export default function Demo() {
  const settings = {
    "placeholder": "메시지를 입력하세요.",
    "variant": "default",
    "disabled": false
  };
  const [value, setValue] = useState('');
  return (
    <div style={{ width: 320, maxWidth: '100%' }}>
      <Composer
        value={value}
        onValueChange={setValue}
        onSend={() => setValue('')}
        variant={settings.variant as ComposerVariant}
        disabled={settings.disabled}
        sendLabel={"메시지 보내기"}
        textareaProps={{
          'aria-label': "메시지",
          placeholder: settings.placeholder,
          style:
            settings.variant === 'reply' ? { alignSelf: 'center' } : undefined,
        }}
      />
    </div>
  );
}

Properties

Variant

Disabled

Content

Placeholder

Usage

onSend에 전송 요청을 연결합니다. 전송 후 입력을 비우거나 비활성화하는 동작은 앱에서 처리합니다.

'use client';
import { useState } from 'react';
import { Composer } from '@mbsw/ui';

export default function Example() {
  const [value, setValue] = useState('');
  return (
    <Composer
      value={value}
      onValueChange={setValue}
      onSend={() => setValue('')}
      sendLabel={"메시지 보내기"}
      textareaProps={{
        'aria-label': "메시지",
        placeholder: "메시지를 입력하세요.",
      }}
    />
  );
}

Playground의 Code 탭에서 현재 설정과 동작이 포함된 예제 전체를 복사할 수 있습니다. 공통 CSS 설치는 설치하기를 확인하세요.

Composition

Composer