Reactjs chat elements chat UI, react chat components
Branch: master
Clone or download
Latest commit 8a0af78 Feb 13, 2019

README.md

npm Github pre-)release

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

prop default type description
avatar none string ChatItem avatar photo url
avatarFlexible false boolean flexible ChatItem avatar photo
alt none string ChatItem avatar photo alt text
title none string ChatItem title
subtitle none string ChatItem subtitle
date none date ChatItem date
dateString none string ChatItem represents dateString or moment(date).fromNow()
unread 0 int ChatItem unread count
onClick none function ChatItem on click
onContextMenu none function ChatItem on context menu
statusColor none color ChatItem status color
statusText none color ChatItem status text
lazyLoadingImage none image path lazy loading image

MessageBox Component

file photo text location
file-message photo-message   text-message location-message
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

prop default type description
id i (index) string  message box id
position  left string  message box position
type  text string  message type (text, photo, file, location, spotify)
text none string  message text
title none string  message title
titleColor none string(color)  message title color
data  {} object message data
date new Date() Date message date
dateString none string message represents dateString or moment(date).fromNow()
onClick none function message on click (message(object) is returned)
onOpen none function message on open (file or photo) (message(object) is returned)
onDownload none function message on download (file or photo) (message(object) is returned)
onLoad none function message on load photo
onTitleClick none function message title on click event
onForwardClick none function message forward on click event
onContextMenu none function message contextmenu click event
forwarded none boolean message forward icon
status none string message status info (waiting, sent, received, read)
notch true boolean message box notch
avatar none url message box avatar url
renderAddCmp none function (component) adding custom components to message box
copiableDate false boolean message box date text copiable

SystemMessage Component

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

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

SystemMessage props

prop default type description
text none string  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

prop default type description
className none string optional message list className
dataSource [] array message list array
lockable false boolean It locks to scroll position when the dataSource has been changed
toBottomHeight 300 int 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.
onClick none function message list item on click (message(object) is returned)
onOpen none function message list item on open (file or photo) (message(object) is returned)
onDownload none function message list item on download (file or photo) (message(object) is returned)
onScroll none function message list onScroll event
onForwardClick none function message list item onForwardClick event
downButton true boolean message list scroll to bottom button
downButtonBadge none boolean message list downButton badge content
onDownButtonClick none function message list onDownButtonClick
onContextMenu none function message 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

prop default type description
className none string optional chat list className
dataSource [] array chat list array
onClick none function chat list item on click (chat(object) is returned)
onContextMenu none function chat list item on context menu (chat(object) is returned)
onAvatarError none function chat list item on error avatar img
lazyLoadingImage none image path lazy 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

prop default type description
className none string optional input className
placeholder none string input placeholder text
defaultValue none string input default value
onChange none function input onChange function
multiline false bool input is textarea
autoHeight true bool input auto height
minHeight 25 int input min height
maxHeight 200 int input max height
inputStyle none object inputStyle object
leftButtons none object(component) left buttons component
rightButtons none object(component) right buttons component
inputRef none function input or textarea ref
maxlength none int input or textarea maxlength
onMaxLengthExceed none function called when max length exceed
autofocus false bool input autofocus

Button Component

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

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

Button props

prop default type description
type none string button type (outlined, transparent)
disabled none string button is disabled?
text none string button text
buttonRef none function button ref
title none string button 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

prop default type description
show false bool popup visible
header none string popup title (header) message
headerButtons none array popup title (header) buttons
text none string popup content (center) message
color #333 string (color) popup content message color
footerButtons none array popup footer buttons
renderHeader none function (component) render header function
renderContent none function (component) render content function
renderFooter none function (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

prop default type description
type light string sidebar style type (eg: light, dark)
top none component sidebar top component
center none component sidebar center component
bottom none component sidebar 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

prop default type description
type light string navbar style type (eg: light, dark)
left none component navbar left component
center none component navbar center component
right none component navbar right component

Dropdown Component

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

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

Dropdown props

prop default type description
animationType none string fade or default
animationPosition nortwest string animation start position (nortwest, norteast, southwest, southeast)
items none array dropdown items array
onSelect none function item on select
buttonProps none object button 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

prop default type description
src none image image src
alt none string image alt description
size default string image size. default (25px), xsmall(30px), small(35px), medium(40px), large(45px), xlarge (55px)
type default string types: default, circle, rounded(border radius 5px), flexible
sideElement none component avatar side element
onError none component avatar img onerror
lazyLoadingImage none image path lazy loading image

LocationMessage Component

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

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

LocationMessage props

prop default type description
src none image image src
apiKey none string google staticmap api key
zoom 14 int google staticmap zoom level
markerColor red string google staticmap marker color
data {} object  message data
target _blank string image a tag target prop
onOpen none function image on open

SpotifyMessage Component

spotify

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

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

SpotifyMessage props

prop default type description
uri none uri spotify uri
theme black string spotify theme color (black or white)
view list string spotify view type (list or coverart)
data {} object  message data
width 300 int spotify embed width
height 380 int spotify embed height