@twilio-labs/react-chat
v1.0.1-alpha.4@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