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

    0.4.0 • Public • Published

    react-chat-ui logo

    🙊 react-chat-ui

    A library of React components for building chat UI's.

    NPM

    Sponsor

    Sponsored by Pusher Chatkit:

    Pusher Chatkit

    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 and/or tweet at me here.

    Installation

    npm install react-chat-ui --save

    Basic Usage

    import { ChatFeed, Message } from 'react-chat-ui'
     
    // Your code stuff...
     
    render() {
     
      return (
     
        // Your JSX...
     
        <ChatFeed
          messages={this.state.messages} // Array: 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: [
        new Message({
          id: 1,
          message: "I'm the recipient! (The person you're talking to)",
        }), // Gray bubble
        new Message({ id: 0, message: "I'm you -- the blue bubble!" }), // Blue bubble
      ],
      //...
    };
    //...

    API

    Contributing!¡1 🔧

    Contributions are always welcomed and encouraged. If you don't want to write a feature request yourself, let ya boi know (either on Twitter or by creating a Pull Request) and I'll get that shit coded right up.

    Support

    If you'd like to support my development of react-chat-ui, you can donate via Litecoin or Etherium. But I also love when I get a shout-out on Twitter❤️

    • LTC: LYExBx4bwSpAju6YpMXBLBCYVDvWV6n8fz
    • ETH: 0xf9bf1a68732b1314f28050addd3ed13f2a187d9d

    TODO

    • documentation
    • documentation
    • documentation

    Development

    npm run dev

    Install

    npm i react-chat-ui

    DownloadsWeekly Downloads

    2,523

    Version

    0.4.0

    License

    ISC

    Unpacked Size

    56.2 kB

    Total Files

    41

    Last publish

    Collaborators

    • brandonmowat