@treet/react-chat-ui
TypeScript icon, indicating that this package has built-in type declarations

1.1.1 • Public • Published

🙊 @treet/react-chat-ui

A library of React components for building chat UI's. This is an fork of the original React Chat UI maintained by Treet developers.

Features

  • Auto scroll to bottom
  • SUPER easy to use
  • Multiple user grouping (try it out in the demo)

Keep in mind that this project is still in the early stages of development. If you encounter a bug or have a feature request, please create an issue.

Installation

$ yarn add @treet/react-chat-ui

Basic Usage

import { ChatFeed, Message } from '@treet/react-chat-ui'

// Your code stuff...

render() {

  return (

    // Your JSX...

    <ChatFeed
      messages={this.state.messages} // Boolean: list of message objects
      isTyping={this.state.is_typing} // Boolean: is the recipient typing
      hasInputField={false} // Boolean: use our input, or use your own
      showSenderName // show the name of the user who sent the message
      bubblesCentered={false} //Boolean should the bubbles be centered in the feed?
      // JSON: Custom bubble styles
      bubbleStyles={
        {
          text: {
            fontSize: 30
          },
          chatbubble: {
            borderRadius: 70,
            padding: 40
          }
        }
      }
    />

    // Your JSX...

  )

}

Make sure to keep a list of proper message objects in your class state. Like so:

//...
this.state = {
  messages: [
    {
      id: 1,
      message: "I'm the recipient! (The person you're talking to)",
    }, // Gray bubble
    {
      id: 0,
      message: "I'm you -- the blue bubble!",
    }, // Blue bubble
  ],
  //...
};
//...

API

Contributing!¡1 🔧

Contributions are always welcomed and encouraged.

TODO

  • documentation
  • documentation
  • documentation

Development

$ yarn install && yarn watch

Package Sidebar

Install

npm i @treet/react-chat-ui

Weekly Downloads

18

Version

1.1.1

License

ISC

Unpacked Size

42.7 kB

Total Files

26

Last publish

Collaborators

  • rauli