Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

personal-react-chat-ui

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

personal-react-chat-ui

A react based chat UI

  • 0.2.3
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
0
Maintainers
1
Weekly downloads
 
Created
Source

ReactChatUI

This is my React-Redux chat UI using WebSockets to talk to a websocket based Chat Engine. Mainly made to plugin with my Node-Chat-Engine, but can plugin to any simple chat engine you make that fits the mold.

Setup

With yarn lets start:

yarn install

We have a couple of scripts that can be run to generate files you can use in your chat instance.

yarn build:nwb: This will generate UMD files in the /umd directory for you to grab.

yarn build:webpack This will generate a webpack bundle js and css file in src.

yarn storybook This will start a storybook on port 9000, to view stories of react components being styled.

Using in HTML

You can link to the UMD script generated and create an instance of the Chat UI to talk to a websocket based engine. Here is an example setup html file.

<head>
    <script src="react-chat-ui.js"></script>
    <link rel="stylesheet" href="react-chat-ui.css" />
</head>

<div id="chat-element"></div>

<script>
    var element = document.getElementById('chat-element');

    var reactWebChat = new ReactChatUI({
        url: 'ws://localhost:3000/chat',
        element: element,
        workflowID: 1
    });
</script>

TODOs

  • Fix Styling and Color Scheme.
  • Messages come in smooth style transitions rather that instant.
  • Scroll to bottom of chat when new messages come in below.
  • User typed input. (When My Chat Engine includes it.)

FAQs

Package last updated on 14 Jun 2018

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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc