react-chat-elements-typescript v11.0.0

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

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

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.'
  }
/>;

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