# @tungdinh9118/react-use-action-cable

> Hooks to easily use Rails Action Cable in your React (Native) application

Latest version **1.0.4** (published 2023-08-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @tungdinh9118/react-use-action-cable
pnpm add @tungdinh9118/react-use-action-cable
yarn add @tungdinh9118/react-use-action-cable
bun add @tungdinh9118/react-use-action-cable
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2023-08-26 |
| First published | 2023-08-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 22.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | TungDinh |
| Maintainers | tungdinh9118 |
| Keywords | react, hooks, rails, cable, actioncable, socket, websocket |

## Links

- npm: https://www.npmjs.com/package/@tungdinh9118/react-use-action-cable
- Repository: https://github.com/dinhtung9118/react-use-action-cable
- Homepage: https://github.com/dinhtung9118/react-use-action-cable#readme
- Issues: https://github.com/dinhtung9118/react-use-action-cable/issues
- npm.io page: https://npm.io/package/@tungdinh9118/react-use-action-cable

## Dependencies (1)

- [@rails/actioncable](https://npm.io/package/@rails/actioncable.md) ^7.0.0

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2023-08-26
- 1.0.3 — 2023-08-26
- 1.0.2 — 2023-08-26

## README

# React Use Action Cable
Hooks to use Rails Action Cable in your React (Native) application.

## Installation
```bash
npm install @aersoftware/react-use-action-cable --save
```

## 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](https://reactjs.org/docs/context.html).
```js
import React, { useEffect } from 'react';
import { useActionCable, useChannel } from '@aersoftware/react-use-action-cable';

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.
```js
...
  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.
```js
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.

---
_Source: https://npm.io/package/@tungdinh9118/react-use-action-cable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._