2.0.1 • Published 8 months ago
@lg-chat/chat-window v2.0.1
Chat Window
Installation
Yarn
yarn add @lg-chat/chat-window
NPM
npm install @lg-chat/chat-window
Example
const Example = (props) => {
const userName = "Sean Park";
const [messages, setMessages] = useState<Array<any>>(baseMessages);
const handleMessageSend = (messageBody: string) => {
const newMessage = {
messageBody,
userName,
};
setMessages((messages) => [...messages, newMessage]);
};
return (
<LeafyGreenChatProvider>
<ChatWindow {...props}>
<TitleBar title="LG Chat Demo" badgeText="Beta" />
<MessageFeed>
{messages.map((messageFields) => (
<MyMessage key={messageFields.id} {...messageFields} />
))}
</MessageFeed>
<InputBar onMessageSend={handleMessageSend} />
</ChatWindow>
</LeafyGreenChatProvider>
);
};
Properties
Prop | Type | Description | Default |
---|---|---|---|
darkMode | boolean | Determines if the component should render in dark mode | false |
... | HTMLElementProps<'div'> | Props spread on root element |