react-use-action-cable-ts
v2.2.0
Published
Hooks to easily use Rails Action Cable in your React application
Downloads
2,204
Maintainers
Readme
React Use Action Cable
Hooks to use Rails Action Cable in your React application.
Installation
npm i react-use-action-cable-ts
Usage
Connecting to a websocket
To connect to an Action Cable, simply call the useActionCable hook with the URL you wish to connect to. If you want to be able to use this Action Cable throughout your application consider implementing it in a context.
import React, { useEffect } from 'react';
import { useActionCable, useChannel } from 'react-use-action-cable-ts';
export default function index() {
const { actionCable } = useActionCable('ws://localhost:3000/cable');
}
Subscribe to a channel
Provide the useChannel hook with the previously created actionCable
. You then get access to the (un)subscribe and send functions. In the example below we immediately subscribe to the channel 'ChannelName' on the first render.
...
const { subscribe, unsubscribe, send } = useChannel(actionCable)
useEffect(() => {
subscribe({
channel: 'ChannelName',
param2: '...',
param3: '...'
}, {
received: (data) => console.log(data),
// Custom callbacks can be added for 'initialized', 'connected', and 'disconnected'
})
return () => {
unsubscribe()
}
}, [])
...
Sending data
To send data to the channel that we are subscribe to we can use the send
function as below.
send({
action: 'ping',
payload: {}, // Optional
useQueue: true // Optional, default: false
})
When setting useQueue to true
the message will be added to a queue and will be sent as soon as possible. That is, immediately when the websocket is connected. If the websocket is not connected at the time send()
is called it will be sent as soon as the websocket reconnects.