@twilio-labs/react-chat
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1-alpha.4 • Public • Published

    @twilio-labs/react-chat

    A React Wrapper library for Twilio Chat

    npm

    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

    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

    Keywords

    none

    Install

    npm i @twilio-labs/react-chat

    DownloadsWeekly Downloads

    5

    Version

    1.0.1-alpha.4

    License

    MIT

    Unpacked Size

    1.02 MB

    Total Files

    31

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar