Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »

@twilio-labs/react-chat

1.0.1-alpha.2 • Public • Published

@twilio-labs/react-chat

A React Wrapper library for Twilio Chat

npm

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" />
        <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

0

version

1.0.1-alpha.2

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability