Reactjs chat elements chat UI

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';

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

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

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 eg:
<Input
    ref='input'
    placeholder="Type here..."/>

this.refs.input.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
    top={
        <div>'TOP' area</div>
    }
    center={
        <div>'CENTER' area</div>
    }
    bottom={
        <div>'BOTTOM' area</div>
    }/>

Navbar props

Dropdown Component

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

<Dropdown
    buttonProps={{
        text: 'Dropdown',
    }}
    items={[
        'merhaba',
        'lorem',
        'ipsum',
        'dolor',
        'sit',
        'amet',
    ]}/>

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',
    }}/>

LocationMessage props

SpotifyMessage Component

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

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

SpotifyMessage props

GitHub