react-chat-interface
v0.1.0
Published
A simple chat interface for React
Downloads
29
Readme
React Chat

React Chat is a simple chat interface for React with a focus on high customizability.
Installation
npm i --save react-chat-interfaceExample
In order to see the examples and play with the configuration, clone/fork this repository and run storybook
git clone https://github.com/thinkty/react-chat.gitcd react-chatnpm inpm run storybookProps
| Name | Description | Required | Default | Types |
|------------------------|----------------------------------------------------------------------------------|:--------:|:--------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------------:|
| messages | array of message items | ✓ | | Message[] |
| onSubmit | callback function to be called when submit button or ctrl-enter has been pressed | ✓ | | (content: string) => void |
| height | height of the ReactChat component | | 500px | string |
| width | width of the ReactChat component | | 300px | string |
| autoScrollToBottom | scroll to bottom on mount and on new message | | true | bool |
| senderStyle | CSS property for the sender name | | styles.ts | CSS |
| primaryStyle | CSS property for message sent by the owner | | styles.ts | CSS |
| secondaryStyle | CSS property for message sent by others | | styles.ts | CSS |
| allowEmptySubmit | If true, allow onSubmit to be triggered even if content is empty | | false | bool |
| textAreaStyle | CSS property for the text-area input | | styles.ts | CSS |
| enableSubmitButton | If true, display submit button | | true | bool |
| enableCtrlEnterSubmit | If true, enable submit by pressing ctrl-enter | | true | bool |
| submitButtonColor | Color of the submit button on non-hover state | | #DCDCDC | string |
| submitButtonStyle | CSS property for the submit button | | styles.ts | CSS |
| submitButtonHoverColor | Color of the submit button on hover state | | #B3B3B3 | string |
| submitButtonHoverStyle | CSS property for the submit button on hover state | | styles.ts | CSS |
| | | | | |
| | | | | |
