npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-chat-elements

v12.0.17

Published

Reactjs chat components

Downloads

45,267

Readme

npm Github pre-)release

react-chat-elements

Reactjs chat elements

NOTE: this package does 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

| 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 timeagojs(now, date) | | 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 | | statusColorType | badge | string | ChatItem status color type (encircle, badge) | | statusText | none | color | ChatItem status text | | lazyLoadingImage | none | image path | lazy loading image | | muted | false | bool | chat mute info | | showMute | false | bool | chat mute button visibilty | | showVideoCall | false | bool | chat video call button visibilty | | onClickMute | none | function | mute button | | onClickVideoCall | none | function | video call button |

MessageBox Component

| file | photo | text | location | video | audio | | --------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | | 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, video, audio) | | 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 timeagojs(now, date) | | 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 | | onPhotoError | none | function | message on error photo | | onTitleClick | none | function | message title on click event | | onForwardClick | none | function | message forward on click event | | onReplyClick | none | function | message reply on click event | | onMeetingMessageClick | none | function | meeting message on click event | | onMeetingTitleClick | none | function | meeting title message on click event | | onMeetingVideoLinkClick | none | function | meeting video link message on click event | | onReplyMessageClick | none | function | reply message on click event | | onRemoveMessageClick | none | function | message remove on click event | | onMeetingMoreSelect | none | function | message list item onMeetingMoreSelect event, gets 3 parameters: message item, index of item, event | | onMeetingLinkClick | none | function | meeting link on click event | | onContextMenu | none | function | message contextmenu click event | | forwarded | none | boolean | message forward icon | | replyButton | none | boolean | message reply icon | | removeButton | none | boolean | message remove 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 | | focus | false | boolean | used in message focus feature in MessageList component, makes style of the component focused | | onMessageFocused | none | function | makes focus value false after the message becomes focus | | reply | none | object | reply data | | retracted | none | boolean | message deleted or retracted | | forwardedMessageText | Forwarded | string | forwarded 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

| prop | default | type | description | | ----------------------- | ---------- | -------- | -------------------------------------------------------------------------------------------------- | | subject | none | string | Meeting messagee | | title | none | string | Meeting title | | date | new Date() | Date | Meeting date | | collapseTitle | none | string | Meeting subtitle | | participants | [] | array | Meeting participant array | | moreItems | none | array | message more items | | dataSource | [] | array | meeting list array | | onClick | none | function | meeting message on click event (message(object) is returned) | | onMeetingTitleClick | none | function | meeting title message on click event (message(object) is returned) | | onMeetingVideoLinkClick | none | function | meeting video link message on click event (message(object) is returned) | | onMeetingMoreSelect | none | function | message list item onMeetingMoreSelect event, gets 3 parameters: message item, index of item, event |

MeetingLink Component

meetinglink-photo

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

MeetingLink props

| prop | default | type | description | | ------------------ | ------- | -------- | --------------------------- | | meetingID | none | string | Meeting Link id | | title | none | string | Meeting Link title | | onMeetingLinkClick | none | function | meeting link on click event |

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'
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

| prop | default | type | description | | ------------------- | ------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | referance | none | object | message list ref | | 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 | | onReplyClick | none | function | message list item onReplyClick event | | onReplyMessageClick | none | function | message list item onReplyMessageClick 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 | | onPhotoError | none | function | message 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

| 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'
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

| prop | default | type | description | | ----------------- | ------- | ----------------- | ----------------------------- | | referance | none | object | input ref | | 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 | | ref | 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 | | value | none | string | input value |

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={[
    {
      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

| 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 | | letterItem | none | object | avatar to be a letter | | 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',
    // staticURL: '<optional>',
    // mapURL: '<optional>'
  }}
/>

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 |

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

| prop | default | type | description | | ---------------- | ------- | ---------- | --------------------------------------------------------- | | subject | none | string | MeetingItem subject | | subjectLimit | 60 | int | MeetingItem subject text limit | | date | none | date | MeetingItem date | | dateString | none | string | MeetingItem represents dateString or timeagojs(now, date) | | lazyLoadingImage | none | image path | lazy loading image | | closable | true | boolean | MeetingItem closable | | onClick | none | function | MeetingItem on click | | onMeetingClick | none | function | MeetingItem on meeting click | | onShareClick | none | function | MeetingItem on share click | | onCloseClick | none | function | MeetingItem on close click | | avatars | none | date | MeetingItem avatars | | avatarLimit | 5 | date | MeetingItem avatars limit | | audioMuted | true | boolean | MeetingItem audio muted | | audioSource | null | string | MeetingItem 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

| prop | default | type | description | | ---------------- | ------- | ---------- | ---------------------------------------------------------------- | | className | none | string | optional meeting list className | | dataSource | [] | array | meeting list array | | onClick | none | function | meeting list item on click (meeting(object) is returned) | | onMeetingClick | none | function | meeting list item on meeting click (meeting(object) is returned) | | onShareClick | none | function | meeting list item on share click (meeting(object) is returned) | | onCloseClick | none | function | meeting list item on close click (meeting(object) is returned) | | onContextMenu | none | function | meeting list item on context menu (meeting(object) is returned) | | onAvatarError | none | function | meeting list item on error avatar img | | lazyLoadingImage | none | image path | lazy loading image |