🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
DemoInstallSign in
Socket

react-chat-ui

Package Overview
Dependencies
Maintainers
1
Versions
38
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-chat-ui

A library of React components for building chat UI's

0.1.0
Source
npm
Version published
Weekly downloads
564
-61.53%
Maintainers
1
Weekly downloads
 
Created
Source

react-chat-ui logo

🙊 react-chat-ui

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

NPM

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

TODO

  • documentation
  • documentation
  • documentation

Development

npm run dev

Keywords

react

FAQs

Package last updated on 05 Sep 2017

Did you know?

Socket

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