Socket
Socket
Sign inDemoInstall

react-chat-elements

Package Overview
Dependencies
897
Maintainers
3
Versions
96
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-chat-elements

Reactjs chat components


Version published
Maintainers
3
Weekly downloads
8,909
decreased by-9.05%

Weekly downloads

Readme

Source

npm Github pre-)release

react-chat-elements

Reactjs chat elements

NOTE: this package not support react-native anymore.

Full Documentation, Changelog

Install

npm install react-chat-elements --save

Imports

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

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
  15. MeetingItem
  16. MeetingList
  17. MeetingLink

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
statusColorTypebadgestringChatItem status color type (encircle, badge)
statusTextnonecolorChatItem status text
lazyLoadingImagenoneimage pathlazy loading image
mutedfalseboolchat mute info
showMutefalseboolchat mute button visibilty
showVideoCallfalseboolchat video call button visibilty
onClickMutenonefunctionmute button
onClickVideoCallnonefunctionvideo call button

MessageBox Component

filephototextlocationvideoaudio
file-messagephoto-messagetext-messagelocation-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
propdefaulttypedescription
idi (index)stringmessage box id
positionleftstringmessage box position
typetextstringmessage type (text, photo, file, location, spotify, video, audio)
textnonestringmessage text
titlenonestringmessage 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
onPhotoErrornonefunctionmessage on error photo
onTitleClicknonefunctionmessage title on click event
onForwardClicknonefunctionmessage forward on click event
onReplyClicknonefunctionmessage reply on click event
onMeetingMessageClicknonefunctionmeeting message on click event
onMeetingTitleClicknonefunctionmeeting title message on click event
onMeetingVideoLinkClicknonefunctionmeeting video link message on click event
onReplyMessageClicknonefunctionreply message on click event
onRemoveMessageClicknonefunctionmessage remove on click event
onMeetingMoreSelectnonefunctionmessage list item onMeetingMoreSelect event, gets 3 parameters: message item, index of item, event
onMeetingLinkClicknonefunctionmeeting link on click event
onContextMenunonefunctionmessage contextmenu click event
forwardednonebooleanmessage forward icon
replyButtonnonebooleanmessage reply icon
removeButtonnonebooleanmessage remove 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
focusfalsebooleanused in message focus feature in MessageList component, makes style of the component focused
onMessageFocusednonefunctionmakes focus value false after the message becomes focus
replynoneobjectreply data
retractednonebooleanmessage deleted or retracted
forwardedMessageTextForwardedstringforwarded message text

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

reply-message

MeetingMessage Component

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(),
            ]}
        },
        .
        .
        .
    ]} />
MeetingMessage props
propdefaulttypedescription
subjectnonestringMeeting messagee
titlenonestringMeeting title
datenew Date()DateMeeting date
collapseTitlenonestringMeeting subtitle
participants[]arrayMeeting participant array
moreItemsnonearraymessage more items
dataSource[]arraymeeting list array
onClicknonefunctionmeeting message on click event (message(object) is returned)
onMeetingTitleClicknonefunctionmeeting title message on click event (message(object) is returned)
onMeetingVideoLinkClicknonefunctionmeeting video link message on click event (message(object) is returned)
onMeetingMoreSelectnonefunctionmessage list item onMeetingMoreSelect event, gets 3 parameters: message item, index of item, event

meetinglink-photo

import { MeetingLink } from 'react-chat-elements'
;<MeetingLink meetingID='1' title='Lorem ipsum dolor sit amet.' />
propdefaulttypedescription
meetingIDnonestringMeeting Link id
titlenonestringMeeting Link title
onMeetingLinkClicknonefunctionmeeting link on click event

SystemMessage Component

import { SystemMessage } from 'react-chat-elements'
;<SystemMessage text={'End of conversation'} />
SystemMessage props
propdefaulttypedescription
textnonestringmessage text

MessageList Component

messagelist-photo

import { MessageList } from 'react-chat-elements'
messageListReferance = React.createRef();

<MessageList
	referance={messageListReferance}
	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
referancenoneobjectmessage list ref
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
onReplyClicknonefunctionmessage list item onReplyClick event
onReplyMessageClicknonefunctionmessage list item onReplyMessageClick 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
onPhotoErrornonefunctionmessage list item on error photo

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'
inputReferance = React.createRef()
;<Input
  referance={inputReferance}
  placeholder='Type here...'
  multiline={true}
  value={inputValue}
  rightButtons={<Button color='white' backgroundColor='black' text='Send' />}
/>

// Clear text, e.g.:

inputClear = () => {}
// ...
;<Input clear={clear => (inputClear = clear)} placeholder='Type here...' />
// ...
inputClear()
Input props
propdefaulttypedescription
referancenoneobjectinput ref
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
refnonefunctioninput or textarea ref
maxlengthnoneintinput or textarea maxlength
onMaxLengthExceednonefunctioncalled when max length exceed
autofocusfalseboolinput autofocus
valuenonestringinput value

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={[
    {
      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
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
letterItemnoneobjectavatar to be a letter
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{}objectmessage 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{}objectmessage data
width300intspotify embed width
height380intspotify embed height

MeetingItem Component

meeting-photo

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}
/>
MeetingItem props
propdefaulttypedescription
subjectnonestringMeetingItem subject
subjectLimit60intMeetingItem subject text limit
datenonedateMeetingItem date
dateStringnonestringMeetingItem represents dateString or timeagojs(now, date)
lazyLoadingImagenoneimage pathlazy loading image
closabletruebooleanMeetingItem closable
onClicknonefunctionMeetingItem on click
onMeetingClicknonefunctionMeetingItem on meeting click
onShareClicknonefunctionMeetingItem on share click
onCloseClicknonefunctionMeetingItem on close click
avatarsnonedateMeetingItem avatars
avatarLimit5dateMeetingItem avatars limit
audioMutedtruebooleanMeetingItem audio muted
audioSourcenullstringMeetingItem audio source

MeetingList Component

meetingList-photo

meetingClosable

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',
            }]
        },
        .
        .
        .
    ]} />
MeetingList props
propdefaulttypedescription
classNamenonestringoptional meeting list className
dataSource[]arraymeeting list array
onClicknonefunctionmeeting list item on click (meeting(object) is returned)
onMeetingClicknonefunctionmeeting list item on meeting click (meeting(object) is returned)
onShareClicknonefunctionmeeting list item on share click (meeting(object) is returned)
onCloseClicknonefunctionmeeting list item on close click (meeting(object) is returned)
onContextMenunonefunctionmeeting list item on context menu (meeting(object) is returned)
onAvatarErrornonefunctionmeeting list item on error avatar img
lazyLoadingImagenoneimage pathlazy loading image

Keywords

FAQs

Last updated on 20 Feb 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc