react-chat-elements

Reactjs chat elements

NOTE: this package not support react-native anymore.

Full Documentation, Changelog

Install

npm install react-chat-elements --save

Imports

// RCE CSS
import 'react-chat-elements/dist/main.css'
// MessageBox component
import { MessageBox } from 'react-chat-elements'

Components

1. ChatItem
2. MessageBox
3. SystemMessage
4. MessageList
5. ChatList
6. Input
7. Button
8. Popup
9. SideBar
10. Navbar
11. Dropdown
12. Avatar
13. LocationMessage
14. SpotifyMessage
15. MeetingItem
16. MeetingList
17. MeetingLink

ChatItem Component

import { ChatItem } from 'react-chat-elements'
;<ChatItem
  avatar={'https://facebook.github.io/react/img/logo.svg'}
  alt={'Reactjs'}
  title={'Facebook'}
  subtitle={'What are you doing?'}
  date={new Date()}
  unread={0}
/>

ChatItem props

MessageBox Component

file	photo	text	location	video	audio

import { MessageBox } from 'react-chat-elements'
;<MessageBox
  position={'left'}
  type={'photo'}
  text={'react.svg'}
  data={{
    uri: 'https://facebook.github.io/react/img/logo.svg',
    status: {
      click: false,
      loading: 0,
    },
  }}
/>

MessageBox props

Reply Message Component

import { MessageBox } from 'react-chat-elements'
;<MessageBox
  reply={{
    photoURL: 'https://facebook.github.io/react/img/logo.svg',
    title: 'elit magna',
    titleColor: '#8717ae',
    message: 'Aliqua amet incididunt id nostrud',
  }}
  onReplyMessageClick={() => console.log('reply clicked!')}
  position={'left'}
  type={'text'}
  text={'Tempor duis do voluptate enim duis velit veniam aute ullamco dolore duis irure.'}
/>

MeetingMessage Component

```javascript import { MeetingMessage } from 'react-chat-elements'

<MeetingMessage subject={'New Release'} title={'in ullamco'} date={new Date()} collapseTitle={'Commodo aliquip'} participants={[ { id: '1', title: 'Facebook', }, . . . ]} dataSource={[ { id: '1', avatar: 'https://facebook.github.io/react/img/logo.svg', message: 'Lorem ipsum dolor sit amet.', title: 'Elit magna', avatarFlexible: true, date: new Date(),