https://github.com/eyalzh/react-headless-chatbox
Headless chatbox React component
https://github.com/eyalzh/react-headless-chatbox
chatbox headless react
Last synced: 2 months ago
JSON representation
Headless chatbox React component
- Host: GitHub
- URL: https://github.com/eyalzh/react-headless-chatbox
- Owner: eyalzh
- License: mit
- Created: 2023-10-01T11:52:57.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-06T12:04:48.000Z (over 2 years ago)
- Last Synced: 2025-08-29T21:02:19.868Z (10 months ago)
- Topics: chatbox, headless, react
- Language: TypeScript
- Homepage:
- Size: 57.6 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Headless Chatbox
A simple headless chatbox React component that consists of:
- A messages container that is scrolled automatically
- Chat messages that are styled differently per participant in the chat (e.g. aligned left/right)
- A textbox that grows with content and is cleared after submission
- A send button
With this headless implementation, you can fully style and position the messages, the textbox and the trigger.
## Example
## Install
```bash
npm install react-headless-chatbox
```
```bash
yarn add react-headless-chatbox
```
## Code Example
The following code example uses tailwind to style the chatbox, as shown in the image above:
```jsx
import { useState } from "react";
import { Chatbox, Message as ChatboxMessage, Participant as ChatboxParticipant } from "react-headless-chatbox";
import { ReactComponent as TriggerSVG } from "./trigger.svg";
interface Participant extends ChatboxParticipant {
// Add custom properties here
}
interface Message extends ChatboxMessage {
id: string;
text: string;
// Add more properties here
}
const PARTICIPANTS = [
{ id: "john", side: "left"},
{ id: "jane", side: "right" },
] satisfies Participant[];
const MESSAGES = [
{
id: "1",
participantId: "john",
text: "Hello, Jane!",
},
{
id: "2",
participantId: "jane",
text: "Hi, John!",
},
] satisfies Message[];
function MyChatbox() {
const [messages, setMessages] = useState(MESSAGES);
const onMessageSend = (text: string) => {
const newMessage = {
id: Math.random().toString(),
participantId: "jane",
text,
};
setMessages((prevMessages) => [...prevMessages, newMessage]);
};
return (
Jane (online)
{messages.map((message) => (
{
return `p-2 rounded-md shadow-md m-2 ${
participant.side === "right"
? "bg-blue-600 text-white ml-8"
: "bg-gray-200 text-gray-900 mr-8"
}`;
}}
>
{message.text}
))}
);
}
```
The trigger.svg file:
```svg
.st0{fill:none;}
```
## API
### Chatbox
| Prop Name | Type | Description |
| --- | --- | --- |
| `onMessageSend` | `(text: string) => void` | Callback function to be called when the user submits a message. |
| `messages` | `Array` | An array of `Message` objects to display in the chatbox. |
| `participants` | `Array` | An array of `Participant` objects representing the participants in the chat. |
| `autoScrollDown?` | `boolean` | If true, the container will scroll down automatically (default: true). |
| `className` | `string` | Additional CSS classes to apply to the component. |
| `style` | `React.CSSProperties` | Inline styles to apply to the component. |
| `ref` | `React.Ref` | ref object to the HTML container element. |
### Chatbox.Messages:
| Prop Name | Type | Description |
| --- | --- | --- |
| `className` | `string` | Additional CSS classes to apply to the component. |
| `style` | `React.CSSProperties` | Inline styles to apply to the component. |
### Chatbox.Message:
| Prop Name | Type | Description |
| --- | --- | --- |
| `message` | `Message` | The message object being rendered |
| `className` | `string \| ((participant: Participant) => string);` | Additional CSS classes to apply to the component. You can also use the function to style each message based on the participant |
| `style` | `React.CSSProperties` | Inline styles to apply to the component. |
### Chatbox.Textbox:
| Prop Name | Type | Description |
| --- | --- | --- |
| `ref` | `React.Ref` | ref object to the textarea element. |
| `className` | `string` | Additional CSS classes to apply to the component. |
| `style` | `React.CSSProperties` | Inline styles to apply to the component. |
| `placeholder` | `string` | Placeholder text to display in the textarea. |
| `maxLength` | `number` | Maximum number of characters allowed in the textarea. |
| `onChange` | `ChangeEventHandler` | Callback function to be called when the value of the textarea changes. |
| `aria-label` | `string` | ARIA label for the textarea (default: "Message to send"). |
### Chatbox.Trigger
| Prop Name | Type | Description |
| --- | --- | --- |
| `ref` | `React.Ref` | ref object to the button element. |
| `className` | `string` | Additional CSS classes to apply to the component. |
| `style` | `React.CSSProperties` | Inline styles to apply to the component. |
| `aria-label` | `string` | ARIA label for the button (default: "Send Message"). |
## See also
[React Headless Gallery](https://github.com/eyalzh/react-headless-gallery)