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

@barmanjoke/react-chatbox-component

v0.0.6

Published

[![GitHub license](https://img.shields.io/github/license/nsebhastian/react-chatbox-component?color=blue&style=flat-square)](https://github.com/nsebhastian/react-chatbox-component/blob/master/LICENSE) [![Current stable version](https://img.shields.io/npm/v

Downloads

8

Readme

React ChatBox Component

GitHub license Current stable version Pull Requests are welcome

Plug and play Chat component for creating React Chat App.

In isolation, the component looks like this:

ChatBox Component

The idea is that you embed this component in your own container, for example a pop-up chat widget or beneath a heading:

ChatBox plugged in

Really, the aim is to make implementing a chat component as quick as possible. All you need to do is pass an array of messages (normally this.state.messages, unless you're using hooks):

import 'react-chatbox-component/dist/style.css';
import {ChatBox} from 'react-chatbox-component';

const messages = [
  {
    "text": "Hello there",
    "id": "1",
    "sender": {
      "name": "Ironman",
      "uid": "user1",
      "avatar": "https://data.cometchat.com/assets/images/avatars/ironman.png",
    },
  },
]

<ChatBox
  messages={messages}
/>

To differentiate bubble color, you can use the pass a user object with a uid property. When sender uid matched the user uid, it will render message from the right side.

const user = {
  "uid" : "user1"
}

<ChatBox
  messages={messages}
  user={user}
/>

If you built your own chat server, you may need to map messages and user to match this data structure. If you're using CometChat, the structure is identical.

See an example here (no cussing, please).

Features

  • [x] Responsive
  • [x] Automatically scrolls to bottom
  • [x] Really easy and quick to use
  • [x] Customise the colours to match your app
  • [x] Pass your own rendering functions to tweak things like the chat bubble or (optional) typing indicator

Installation

npm install react-chatbox-component

How to use

I wrote a tutorial on how to make the chat box work with message history, typing indicators, and more here. Find the example source code here too.

The ChatBox component has the following API:

  • messages (array) - array of messages to render inside the chat interface
  • onSubmit (function) - function to execute when user submit a new message. Will log new message into the console if not used
  • isLoading (boolean) - display a loading screen when the value is true
  • user (object) - the currently logged in user. Used to differentiate message bubble color
  • renderMessage (optional) (function) - optional function to render chat bubbles
  • typingListener (optional) (function) - optional function executed when user is typing
  • typingIndicator(optional) (element) - JSX element to render at the bottom of chat interface. Used to show that a user is typing

Here is a typical implementation for this component. You need to import the style and the component:

import 'react-chatbox-component/dist/style.css';
import {ChatBox} from 'react-chatbox-component';

<div className='container'>
  <div className='chat-header'>
    <h5>React Chat Box Example</h5>
  </div>
  <ChatBox messages={this.state.messages} />
</div>

Ready Example

If you'd like to help in development or just curious with how things work, you can run a local copy of this repo by following these steps:

  • Download or clone this repository
  • In the react-chatbox-component directory, run npm install
  • run npm start

The application entry point is located in src/test/App.js while the library is in src/lib/ directory.

Any contribution, no matter how small, is greatly appreciated.