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

stream-chat-react

Package Overview
Dependencies
Maintainers
5
Versions
479
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

stream-chat-react

React components to create chat conversations or livestream style chat

  • 0.1.56
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
71K
increased by26.58%
Maintainers
5
Weekly downloads
 
Created
Source

React Chat Components

With these chat components you can support any type of chat use case:

  • Livestreams like Twitch or Youtube
  • In-Game chat like Overwatch or Fortnite
  • Team style chat like Slack
  • Messaging style chat like Whatsapp or Facebook's messenger
  • Commerce chat like Drift or Intercom

React Chat Tutorial & Docs

The best place to start is the React Chat Tutorial

You'll also want to review the React Chat Component Documentation.

If you're customizing the components it's important to learn how the Chat Server API works. You can read about that in the Chat API docs.

Development & Contributing

Commands

  • yarn docs-server
  • yarn lint-fix
  • yarn lint

Component Reusability

  1. If a component implements a ton of logic it's nice if you split it out into 2 Components The top level component which handles all the logic, and a lower level component which just handles rendering. This makes it easy to change the rendering without having to touch the other stuff. Have a look at Message and MessageTeam to see how this approach works.

  2. Make things configurable via the props where possible. Sometimes an even better approach is to use the props.children approach. Have a look at how flexible the channel layout is due to this approach:

<Channel>
  <ChannelHeader type="Team" />
  <MessageList />
  <MessageInput focus />
  <Thread />
</Channel>

Performance

Since chat can get pretty active it's important to pay attention to performance. For every component either:

  • Implement shouldComponentUpdate
  • Extend PureComponent

You can verify if the update behaviour is correct by sticking this code in your component:

import React from 'react';
import diff from 'shallow-diff';

export default class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps) {
    console.log(diff(this.props, nextProps));
  }
}

Note that the PureComponent uses a shallow diff to determine if a component should rerender upon state change. The regular Component simply always rerenders when there is a state change.

You can read more about PureComponents and common gotchas here: https://codeburst.io/when-to-use-component-or-purecomponent-a60cfad01a81

You want the shallow diff to only be true if something actually changed. Common mistakes that hurt performance are:

  • Mistake: Passing anonymous functions (those are different every time)
  • Solution: Use a regular function
  • Mistake: Passing an object {} or an array [] that's not using seamless-immutable
  • Solution: Use an immutable type (ie a number or a string) or use a seamless immutable version of an object or an array

Keywords

FAQs

Package last updated on 14 Mar 2019

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