React Chat

React Chat is a simple chat interface for React with a focus on high customizability.

Installation

npm i --save react-chat-interface

Example

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.git

cd react-chat

npm i

npm run storybook

Props

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

License

MIT