https://github.com/dnamsons/rails-hooks

Rails javascript APIs turned into Hooks for use in functional React components
https://github.com/dnamsons/rails-hooks

actioncable rails

Last synced: about 1 month ago
JSON representation

Rails javascript APIs turned into Hooks for use in functional React components

• Host: GitHub
• URL: https://github.com/dnamsons/rails-hooks
• Owner: dnamsons
• License: mit
• Created: 2021-02-21T14:20:45.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2021-02-21T15:07:37.000Z (almost 4 years ago)
• Last Synced: 2024-10-27T22:13:36.004Z (3 months ago)
• Topics: actioncable, rails
• Language: TypeScript
• Homepage:
• Size: 5.86 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Rails hooks

[![Version][version-badge]][package]

## Installation

with npm

```sh

npm install rails-hooks

```

with yarn

```sh

yarn add rails-hooks

```

## API

- [useCable](#usecable)

### `useCable`

Requires for `CableProvider` to be set somewhere above the component where `useCable` will be used.

```tsx

import React from 'react'

import { CableProvider } from 'rails-hooks'

import { createConsumer } = '@rails/actioncable'

const App = () => {

  const consumer = createConsumer('optional-url.com')

  return(

    

      ...

    

  )

}

```

Then `useCable` can be used like this:

```tsx

import { useCable } from 'rails-hooks'

const [messages, setMessages] = useState([])

const chatChannel = useCable(

  { channel: 'ChatChannel', room: 'Best room' },

  {

    received(data) {

      setMessages(prevMessages => [...prevMessages, data])

    },

  }

)

chatChannel.send({ sent_by: 'Paul', body: 'This is a cool chat app.' })

```

[version-badge]: https://img.shields.io/npm/v/rails-hooks.svg?style=flat-square

[package]: https://www.npmjs.com/package/rails-hooks