reactjs-simple-gifted-chat
v3.0.2
Published
Simple version of gifted chat UI for Web ReactJS
Downloads
69
Readme
Simple Gifted Chat
Simple version of chat built to use same APIs as https://github.com/FaridSafi/react-native-gifted-chat
Installation
- Using npm:
npm install reactjs-simple-gifted-chat --save
- Using Yarn:
yarn add reactjs-simple-gifted-chat
Example
import GiftedChat from 'reactjs-simple-gifted-chat';
class Example extends React.Component {
state = {
messages: [],
isFetching: false
};
componentWillMount() {
this.setState({
messages: [
{
_id: 1,
text: 'Hello developer',
createdAt: new Date(),
user: {
_id: 30,
name: 'React',
avatar: 'https://facebook.github.io/react/img/logo_og.png',
}
},
],
});
}
onSend(message) {
const messages = this.state.messages.slice(0)
messages.splice(0, 0, message)
this.setState({ messages });
}
render() {
return (
<GiftedChat
messages={this.state.messages}
onSend={this.onSend}
user={{
_id: 1,
name: 'User'
}}
hasInputField
loadEarlier={true}
onLoadEarlier={() => this.onLoadEarlier()}
isLoadingEarlier={this.state.isFetching}
inverted={true}
isTyping
alwaysShowSend
sendButtonText="Send"
placeholder="Type your message"
renderAvatarOnTop
showAvatarForEveryMessage={false}
showUserAvatar
showReceipientAvatar={false}
avatarSize={70}
messageIdGenerator={uuidv3}
renderAccessory={null}
timezone="America/Los_Angeles"
timeFormat="HH:mm"
dateFormat="YYYY/MM/DD"
maxInputLength="400"
renderTextInput={props => {
// By default GiftedChat uses textarea, override that here using react-textarea-autosize
return <TextareaAutosize {...props} minRows={1} maxRows={5} />
}}
textInputStyle={{ margin: 10 }}
textStyle={{ fontSize: 15 }}
imageStyle={{ width: 500 }}
timeStyle={{ fontSize: 12 }}
dateStyle={{ fontSize: 18 }}
sendButtonStyle={{ backgroundColor: 'blue', fontSize: 16 }}
sendButtonDisabledStyle={{ backgrounColor: 'gray' }}
renderChatEmpty={() => <div>No Messages</div>}
/>
);
}
}
Default Properties
Most of the properties specified have a default value as described:
static defaultProps = {
inverted: true,
hasInputField: true,
loadEarlier: false,
isLoadingEarlier: false,
isTyping: false,
alwaysShowSend: false,
sendButtonText: 'SEND',
renderTextInput: null,
textInputStyle: {},
placeholder: 'Enter your message',
renderAvatarOnTop: false,
showAvatarForEveryMessage: false,
showUserAvatar: false,
onPressAvatar: null,
onPressBubble: null,
showReceipientAvatar: true,
avatarSize: 50,
messageIdGenerator: uuidv4,
timezone: moment.tz.guess(),
timeFormat: 'LT',
dateFormat: 'll',
textStyle: {},
imageStyle: {},
timeStyle: {},
dateStyle: {},
tickStyle: {},
renderSendButton: null, // (props) => {} -- if just style is not enough and need a custom rendering
sendButtonStyle: {},
sendButtonDisabledStyle: {},
renderChatEmpty: null
}
Message Content Hash
{
text: 'This is a message', // Cannot be null
system: true/false, // when true, it displays like the Date
video: 'url',
image: 'url',
audio: 'url',
}