react-chat-elements

Reactjs chat elements

Install

npm install react-chat-elements --save

For React Native

Step 1: Install react-chat-elements

npm install react-chat-elements --save

If you have already installed react-native-vector-icons as a dependency for your project you can skip this step. Otherwise run the following command:

Step 2: Install react-native-vector-icons

npm i --save react-native-vector-icons

Link:

react-native link react-native-vector-icons

If you have any issues installing react-native-vector-icons, check out their installation guide here.

Imports

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

React Native

// MessageBox component
import { MessageBox } from 'react-chat-elements/native';

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

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

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(),
            event: {[
                title: 'Toplantı sona erdi!',
                avatars={[
                    src: 'https://facebook.github.io/react/img/logo.svg'
                ]}
            ]}
            record: {[
                avatar: 'https://facebook.github.io/react/img/logo.svg',
                title: 'Arama',
                savedBy: 'Kaydeden: Elit magna',
                time: new Date(),
            ]}
        },
        .
        .
        .
    ]} />

MeetingMessage props

SystemMessage Component

import { SystemMessage } from 'react-chat-elements'

<SystemMessage
    text={'End of conversation'}/>

SystemMessage props

MessageList Component

import { MessageList } from 'react-chat-elements'

<MessageList
    className='message-list'
    lockable={true}
    toBottomHeight={'100%'}
    dataSource={[
        {
            position: 'right',
            type: 'text',
            text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit',
            date: new Date(),
        },
        .
        .
        .
    ]} />

MessageList props

ChatList Component

import { ChatList } from 'react-chat-elements'

<ChatList
    className='chat-list'
    dataSource={[
        {
            avatar: 'https://facebook.github.io/react/img/logo.svg',
            alt: 'Reactjs',
            title: 'Facebook',
            subtitle: 'What are you doing?',
            date: new Date(),
            unread: 0,
        },
        .
        .
        .
    ]} />

ChatList props

Input Component

import { Input } from 'react-chat-elements'

<Input
    placeholder="Type here..."
    multiline={true}
    rightButtons={
        <Button
            color='white'
            backgroundColor='black'
            text='Send'/>
    }/>

// Clear text, e.g.:
// For pure components, use inputRef instead of this.inputRef

inputRef = React.createRef();
// ...
<Input
    ref={el => (this.inputRef = el)}
    placeholder="Type here..."/>
// ...
this.inputRef.clear();

Input props

Button Component

import { Button } from 'react-chat-elements'

<Button
    text={'click me!'} />

Button props

Popup Component

import { Popup } from 'react-chat-elements'

<Popup
    show={this.state.show}
    header='Lorem ipsum dolor sit amet.'
    headerButtons={[{
        type: 'transparent',
        color:'black',
        text: 'close',
        onClick: () => {
            this.setState({show: false})
        }
    }]}
    text='Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem animi veniam voluptas eius!'
    footerButtons={[{
        color:'white',
        backgroundColor:'#ff5e3e',
        text:"Vazgeç",
    },{
        color:'white',
        backgroundColor:'lightgreen',
        text:"Tamam",
    }]}/>

Popup props

SideBar Component

import { SideBar } from 'react-chat-elements'

<SideBar
    top={
        <div>'TOP' area</div>
    }
    center={
        <div>'CENTER' area</div>
    }
    bottom={
        <div>'BOTTOM' area</div>
    }/>

SideBar props

Navbar Component

import { Navbar } from 'react-chat-elements'

<Navbar
    left={
        <div>'LEFT' area</div>
    }
    center={
        <div>'CENTER' area</div>
    }
    right={
        <div>'RIGHT' area</div>
    }/>

Navbar props

Dropdown Component

import { Dropdown } from 'react-chat-elements'

<Dropdown
    buttonProps={{
        text: 'Dropdown',
    }}
    items={[
        {
            icon: {
                component: icon,
                float: 'left',
                color: 'red',
                size: 22,
            },
            text: 'lorem'
        },
        {
            icon: {
                component: icon,
                float: 'left',
                color: 'purple',
                size: 22,
            },
            text: 'ipsum'
        },
        {
            text: 'dolor'
        },
    ]}/>

Dropdown props

Avatar Component

import { Avatar } from 'react-chat-elements'

<Avatar
    src={'https://facebook.github.io/react/img/logo.svg'}
    alt={'logo'}
    size="large"
    type="circle flexible"/>

Avatar props

LocationMessage Component

import { LocationMessage } from 'react-chat-elements'

<LocationMessage
    data={{
        latitude: '37.773972',
        longitude: '-122.431297',
        // staticURL: '<optional>',
        // mapURL: '<optional>'
    }}/>

LocationMessage props

SpotifyMessage Component

import { SpotifyMessage } from 'react-chat-elements'

<SpotifyMessage
    theme='white'
    view='coverart'
    uri={'spotify:user:spotify:playlist:3rgsDhGHZxZ9sB9DQWQfuf'}/>

SpotifyMessage props

MeetingItem Component

import { MeetingItem } from 'react-chat-elements'

<MeetingItem
    subject={'New Release!!!'}
    avatars={[
        {
            src: 'https://facebook.github.io/react/img/logo.svg'
        }
    ]}
    onMeetingClick={console.log}
    onShareClick={console.log}
    onCloseClick={console.log}/>

MeetingItem props

MeetingList Component

import { MeetingList } from 'react-chat-elements'

<MeetingList
    className='meeting-list'
    dataSource={[
        {
            id: '1',
            subject: 'New Release',
            date: new Date(),
            avatars: [{
               src: 'https://facebook.github.io/react/img/logo.svg',
            }]
        },
        .
        .
        .
    ]} />

MeetingList props