Twilio Conversations Hooks

What is it

twilio-conversations-hooks is a library which provides a bunch of React Hooks to make your life easier when using Twilio Conversations API.

Installation

You can get the latest release using npm:

1$ npm install --save twilio-conversations-hooks

Example

In order to be able to use the hooks, you first have to render the Provider somewhere before your component and pass the connection options, like:

1import React, FunctionComponent from "react"
2import { TwilioProvider } from "twilio-conversations-hooks"
3
4const Providers: FunctionComponent = ({ children }) => {
5    return (
6        <TwilioProvider>
7            ...
8            {children}
9            ...
10        </TwilioProvider>
11    )
12}

First you have to use the useTwilio hook to connect to twilio, and after that you can use the useConversation hook to get and send the messages.

Example:

1import React, { VoidFunctionComponent, useState } from "react"
2import { useTwilio, useConversation } from "twilio-conversations-hooks"
3
4const Chat: VoidFunctionComponent = () => {
5    const [conversationUniqueName, setConversationUniqueName] = useState<string>('')
6    const [message, setMessage] = useState<string>('')
7
8    const { connect, conversations } = useTwilioChat()
9    const { messages, sendMessages } = useConversation(conversationUniqueName)
10
11    useEffect(() => {
12        connectToTwilio()
13    }, [])
14
15    // This function will connect to twilio using your token and set a default conversation to pass to useConversation hook
16    const connectToTwilio = async (): Promise<void> => {
17        const token = localStorage.getItem('token')
18
19        // Here you need to pass your token, in this example I'll get from local storage
20        // Optionally you can pass the identity
21        const conversations = await connect(token)
22
23        const conversation = conversations.find(conversation => conversation.uniqueName === 'my-conversation-unique-name')
24
25        if (conversation) {
26            setConversationUniqueName('my-conversation-unique-name') 
27        }
28    }
29
30    const addMessage = (): void => {
31        sendMessage(message)
32        setMessage('')
33    }
34
35    const switchConversation = (uniqueName: string): void {
36        setConversationUniqueName(uniqueName)
37    }
38
39    return (
40        <div>
41            <ul>
42                {
43                    conversations.map(conversation => (
44                        <li onClick={() => switchConversation(conversation.uniqueName)} key={conversation.uniqueName}>
45                            {conversation.uniqueName}
46                        </li>
47                    ))
48                }
49            </ul>
50            <ul>
51                {
52                    messages.map(message => (
53                        <li>
54                            {message.body}
55                        </li>
56                    ))
57                }
58            </ul>
59            <input value={message} onChange={event => setMessage(event.target.value)} />
60            <button onClick={() => addMessage()}>Send Message</button>
61        </div>
62    )
63}

API

useTwilio()

Returns

• connect | Function - The function to connect to twilio server, you must call this function in order to receive and send messages
• loading | boolean - True if is connecting to twilio and false if the connection is done
• conversations | Conversation[] - List of conversations returned from the connection
• identity | string or undefined - If you pass the identity to the connect function, you can access it through the hook

useConversation()

Parameters

• uniqueName | string - The unique name of your conversation

Returns

• messages | Message[] - The list of messages of that conversation
• sendMessage | Function - The function to send a new message to the conversation