@twilio-labs/react-chat

A React Wrapper library for Twilio Chat

This library aims at helping you use the Twilio Chat product in React.

It's a thin wrapper around the actual implementation of the twilio-chat library and requires it as a peer dependency.

Check out the Getting Started section to learn more.

Install

npm install --save twilio-chat @twilio-labs/react-chat

Requirements

• A Twilio account - Sign up here
• A URL endpoint to generate Twilio Chat access tokens. Follow these instructions for a demo environment

Basic Usage

import * as React from 'react';

import { ChatProvider, Channel } from '@twilio-labs/react-chat';

class MyChat extends React.Component {
  submit = event => {
    event.preventDefault();
    const message = event.target.message.value;
    this.props.channel.sendMessage();
  };

  render() {
    const { messages } = this.props;
    return (
      <div>
        <ul>
          {messages.map(message => {
            return (
              <li key={message.sid}>
                {message.author}: {message.body}
              </li>
            );
          })}
        </ul>
        <form onSubmit={this.submit}>
          <input type="text" name="message"></input>
          <button type="submit">Send Message</button>
        </form>
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <ChatProvider
        tokenUrl="https://TOKEN_URL_ENDPOINT.com"
        onLoading={() => <p>Loading Chat...</p>}
        onError={error => <p>{error.message}</p>}
      >
        <h1>My Chat</h1>
        <Channel uniqueName="demo-channel">
          {channelContext => {
            return <MyChat {...channelContext} />;
          }}
        </Channel>
      </ChatProvider>
    );
  }
}

License

MIT © dkundel