Web fork of most complete chat UI for React Web (formerly known as Gifted Messenger).
Demo is available here
The article how to create working chat in 20 minutes is available on medium - here
- Fully customizable components
- Composer actions (to attach photos, etc.)
- Load earlier messages
- Copy messages to clipboard
- Touchable links using react-native-parsed-text
- Avatar as user's initials
- Localized dates
- Multiline TextInput
- InputToolbar avoiding keyboard
import { GiftedChat } from 'react-web-gifted-chat';
class Example extends React.Component {
state = {
messages: [],
};
componentWillMount() {
this.setState({
messages: [
{
id: 1,
text: 'Hello developer',
createdAt: new Date(),
user: {
id: 2,
name: 'React',
avatar: 'https://facebook.github.io/react/img/logo_og.png',
},
},
],
});
}
onSend(messages = []) {
this.setState((previousState) => ({
messages: GiftedChat.append(previousState.messages, messages),
}));
}
render() {
return (
<GiftedChat
messages={this.state.messages}
onSend={(messages) => this.onSend(messages)}
user={{
id: 1,
}}
/>
);
}
}See example/App.js for a working demo!
e.g.
{
id: 1,
text: 'My message',
createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
user: {
id: 2,
name: 'React',
avatar: 'https://facebook.github.io/react/img/logo_og.png',
},
image: 'https://facebook.github.io/react/img/logo_og.png',
// Any additional custom parameters are passed through
}messages(Array) - Messages to displaytext(String) - Input text; default isundefined, but if specified, it will override GiftedChat's internal state (e.g. for redux; see notes below)placeholder(String) - Placeholder whentextis empty; default is'Type a message...'messageIdGenerator(Function) - Generate an id for new messages. Defaults to UUID v4, generated by uuiduser(Object) - User sending the messages:{ _id, name, avatar }onSend(Function) - Callback when sending a messagelocale(String) - Locale to localize the datestimeFormat(String) - Format to use for rendering times; default is'LT'dateFormat(String) - Format to use for rendering dates; default is'll'isAnimated(Bool) - Animates the view when the keyboard appearsloadEarlier(Bool) - Enables the "Load earlier messages" buttononLoadEarlier(Function) - Callback when loading earlier messagesisLoadingEarlier(Bool) - Display anActivityIndicatorwhen loading earlier messagesrenderLoading(Function) - Render a loading view when initializingrenderLoadEarlier(Function) - Custom "Load earlier messages" buttonrenderAvatar(Function) - Custom message avatar; set tonullto not render any avatar for the messageshowUserAvatar(Bool) - Whether to render an avatar for the current user; default isfalse, only show avatars for other usersshowAvatarForEveryMessage(Bool) - When false, avatars will only be displayed when a consecutive message is from the same user on the same day; default isfalseonPressAvatar(Function(user)) - Callback when a message avatar is tappedrenderAvatarOnTop(Bool) - Render the message avatar at the top of consecutive messages, rather than the bottom; default isfalserenderBubble(Function) - Custom message bubblerenderSystemMessage(Function) - Custom system messageonLongPress(Function(context,message)) - Callback when a message bubble is long-pressed; default is to show an ActionSheet with "Copy Text" (see example usingshowActionSheetWithOptions())inverted(Bool) - Reverses display order ofmessages; default istruerenderMessage(Function) - Custom message containerrenderMessageText(Function) - Custom message textrenderMessageImage(Function) - Custom message imageimageProps(Object) - Extra props to be passed to the<Image>component created by the defaultrenderMessageImagevideoProps(Object) - Extra props to be passed to the<Video>component created by the defaultrenderMessageVideolightboxProps(Object) - Extra props to be passed to theMessageImage's LightboxrenderCustomView(Function) - Custom view inside the bubblerenderDay(Function) - Custom day above a messagerenderTime(Function) - Custom time inside a messagerenderFooter(Function) - Custom footer component on the ListView, e.g.'User is typing...'; see example/App.js for an examplerenderChatFooter(Function) - Custom component to render below the MessageContainer (separate from the ListView)renderInputToolbar(Function) - Custom message composer containerrenderComposer(Function) - Custom text input message composerrenderActions(Function) - Custom action button on the left of the message composerrenderSend(Function) - Custom send button; you can pass children to the originalSendcomponent quite easily, for example to use a custom icon (example)renderAccessory(Function) - Custom second line of actions below the message composeronPressActionButton(Function) - Callback when the Action button is pressed (if set, the defaultactionSheetwill not be used)bottomOffset(Integer) - Distance of the chat from the bottom of the screen (e.g. useful if you display a tab bar)minInputToolbarHeight(Integer) - Minimum height of the input toolbar; default is44listViewProps(Object) - Extra props to be passed to the messages<ListView>; some props can't be overridden, see the code inMessageContainer.render()for detailstextInputProps(Object) - Extra props to be passed to the<TextInput>keyboardShouldPersistTaps(Enum) - Determines whether the keyboard should stay visible after a tap; see<ScrollView>docsonInputTextChanged(Function) - Callback when the input text changesmaxInputLength(Integer) - Max message composer TextInput lengthparsePatterns(Function) - Custom parse patterns for react-native-parsed-text used to linkify message content (like URLs and phone numbers), e.g.:extraData(Object) - Extra props for re-rendering FlatList on demand. This will be useful for rendering footer etc.minComposerHeight(Object) - Custom min height of the composer.maxComposerHeight(Object) - Custom max height of the composer.
You need to have facebook watchman installed
cd exampleyarnyarn startyarn run syncin another terminal window (doesn't matter where)
If you have any issues, you can clear your watches using watchman watch-del-all and try again.
Feel free to ask me question on Twitter @JanRomaniak!
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent