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

ChatItem Component

chatitem-photo
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

propdefaulttypedescription
avatarnonestringChatItem avatar photo url
avatarFlexiblefalsebooleanflexible ChatItem avatar photo
altnonestringChatItem avatar photo alt text
titlenonestringChatItem title
subtitlenonestringChatItem subtitle
datenonedateChatItem date
dateStringnonestringChatItem represents dateString or timeagojs(now, date)
unread0intChatItem unread count
onClicknonefunctionChatItem on click
onContextMenunonefunctionChatItem on context menu
statusColornonecolorChatItem status color
statusTextnonecolorChatItem status text
lazyLoadingImagenoneimage pathlazy loading image

MessageBox Component

filephototextlocation
  
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

propdefaulttypedescription
idi (index)string message box id
position leftstring message box position
type textstring message type (text, photo, file, location, spotify)
textnonestring message text
titlenonestring message title
titleColornonestring(color) message title color
data {}objectmessage data
datenew Date()Datemessage date
dateStringnonestringmessage represents dateString or timeagojs(now, date)
onClicknonefunctionmessage on click (message(object) is returned)
onOpennonefunctionmessage on open (file or photo) (message(object) is returned)
onDownloadnonefunctionmessage on download (file or photo) (message(object) is returned)
onLoadnonefunctionmessage on load photo
onTitleClicknonefunctionmessage title on click event
onForwardClicknonefunctionmessage forward on click event
onContextMenunonefunctionmessage contextmenu click event
forwardednonebooleanmessage forward icon
statusnonestringmessage status info (waiting, sent, received, read)
notchtruebooleanmessage box notch
avatarnoneurlmessage box avatar url
renderAddCmpnonefunction (component)adding custom components to message box
copiableDatefalsebooleanmessage box date text copiable

SystemMessage Component

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

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

SystemMessage props

propdefaulttypedescription
textnonestring message text

MessageList Component

messagelist-photo
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

propdefaulttypedescription
classNamenonestringoptional message list className
dataSource[]arraymessage list array
lockablefalsebooleanIt locks to scroll position when the dataSource has been changed
toBottomHeight300int or string(only ‘100%’)If the toBottomHeight property’s value higher than bottom value of the scrollbar when the data source has been changed Scrollbar goes to bottom at the end of the page. If the toBottomHeight property’s value has been set ‘100%’, scrollbar goes to bottom at the end of the page when the data source has been changed.
onClicknonefunctionmessage list item on click (message(object) is returned)
onOpennonefunctionmessage list item on open (file or photo) (message(object) is returned)
onDownloadnonefunctionmessage list item on download (file or photo) (message(object) is returned)
onScrollnonefunctionmessage list onScroll event
onForwardClicknonefunctionmessage list item onForwardClick event
downButtontruebooleanmessage list scroll to bottom button
downButtonBadgenonebooleanmessage list downButton badge content
onDownButtonClicknonefunctionmessage list onDownButtonClick
onContextMenunonefunctionmessage list item onContextMenu event, gets 3 parameters: message item, index of item, event

ChatList Component

chatlist-photo
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

propdefaulttypedescription
classNamenonestringoptional chat list className
dataSource[]arraychat list array
onClicknonefunctionchat list item on click (chat(object) is returned)
onContextMenunonefunctionchat list item on context menu (chat(object) is returned)
onAvatarErrornonefunctionchat list item on error avatar img
lazyLoadingImagenoneimage pathlazy loading image

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

propdefaulttypedescription
classNamenonestringoptional input className
placeholdernonestringinput placeholder text
defaultValuenonestringinput default value
onChangenonefunctioninput onChange function
multilinefalseboolinput is textarea
autoHeighttrueboolinput auto height
minHeight25intinput min height
maxHeight200intinput max height
inputStylenoneobjectinputStyle object
leftButtonsnoneobject(component)left buttons component
rightButtonsnoneobject(component)right buttons component
inputRefnonefunctioninput or textarea ref
maxlengthnoneintinput or textarea maxlength
onMaxLengthExceednonefunctioncalled when max length exceed
autofocusfalseboolinput autofocus

Button Component

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

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

Button props

propdefaulttypedescription
typenonestringbutton type (outlined, transparent)
disablednonestringbutton is disabled?
textnonestringbutton text
buttonRefnonefunctionbutton ref
titlenonestringbutton title

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

propdefaulttypedescription
showfalseboolpopup visible
headernonestringpopup title (header) message
headerButtonsnonearraypopup title (header) buttons
textnonestringpopup content (center) message
color#333string (color)popup content message color
footerButtonsnonearraypopup footer buttons
renderHeadernonefunction (component)render header function
renderContentnonefunction (component)render content function
renderFooternonefunction (component)render footer function

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

propdefaulttypedescription
typelightstringsidebar style type (eg: light, dark)
topnonecomponentsidebar top component
centernonecomponentsidebar center component
bottomnonecomponentsidebar bottom component

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

propdefaulttypedescription
typelightstringnavbar style type (eg: light, dark)
leftnonecomponentnavbar left component
centernonecomponentnavbar center component
rightnonecomponentnavbar right component

Dropdown Component

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

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

Dropdown props

propdefaulttypedescription
animationTypenonestringfade or default
animationPositionnortweststringanimation start position (nortwest, norteast, southwest, southeast)
itemsnonearraydropdown items array
onSelectnonefunctionitem on select
buttonPropsnoneobjectbutton properties

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

propdefaulttypedescription
srcnoneimageimage src
altnonestringimage alt description
sizedefaultstringimage size. default (25px), xsmall(30px), small(35px), medium(40px), large(45px), xlarge (55px)
typedefaultstringtypes: default, circle, rounded(border radius 5px), flexible
sideElementnonecomponentavatar side element
onErrornonecomponentavatar img onerror
lazyLoadingImagenoneimage pathlazy loading image

LocationMessage Component

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

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

LocationMessage props

propdefaulttypedescription
srcnoneimageimage src
apiKeynonestringgoogle staticmap api key
zoom14intgoogle staticmap zoom level
markerColorredstringgoogle staticmap marker color
data{}object message data
target_blankstringimage a tag target prop
onOpennonefunctionimage on open

SpotifyMessage Component

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

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

SpotifyMessage props

propdefaulttypedescription
urinoneurispotify uri
themeblackstringspotify theme color (black or white)
viewliststringspotify view type (list or coverart)
data{}object message data
width300intspotify embed width
height380intspotify embed height