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

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

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

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

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

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(),
            ]}
        },
        .
        .
        .
    ]} />

import { MeetingLink } from 'react-chat-elements'
<MeetingLink
    meetingID='1'
    title='Lorem ipsum dolor sit amet.'/>

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

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

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(),
        },
        .
        .
        .
    ]} />

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,
        },
        .
        .
        .
    ]} />

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();

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

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

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",
    }]}/>

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

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

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

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

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

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

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

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

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

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

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

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

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