Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar462
Peer review pending

Chat Composer

Version 5.1.1GithubStorybook

A Chat Composer is an input made for users to type rich chat messages.

Installation

Installation page anchor
yarn add @twilio-paste/chat-composer - or - yarn add @twilio-paste/core

Usage

Usage page anchor
import {ChatComposer} from '@twilio-paste/core/chat-composer';

export const BasicChatComposer = () => (
  <ChatComposer
    config={{
      namespace: 'customer-chat',
      onError: (e) => {
        throw e;
      },
    }}
    ariaLabel="A basic chat composer"
    placeholder="Chat text"
  />
);

Props

Props page anchor

ChatComposer

ChatComposer page anchor

config RequiredRequired

Utilize the Lexical API directly

Type
Readonly<{ editor__DEPRECATED?: LexicalEditor | null | undefined; namespace: string; nodes?: readonly (Klass<LexicalNode> | { replace: Klass<LexicalNode>; with: <T extends new (...args: any) => any>(node: InstanceType<...>) => LexicalNode; })[] | undefined; onError: (error: Error, editor: LexicalEditor) => void; edi...
Default
null

disabled

Type
boolean
Default
null

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
CHAT_COMPOSER

initialValue

Type
string
Default
null

maxHeight

Type
| string | number | (string & {}) | (MaxHeightOptions | null)[] | { [x: string]: MaxHeightOptions; [x: number]: MaxHeightOptions }
Default
null

onChange

Type
( editorState: EditorState, editor: LexicalEditor, tags: Set<string> ) => void
Default
null

To help us improve this site, we use tools that set cookies. The data gathered by these tools is anonymized. If you reject the use of cookies, no analytics service will be initiated.