jackhowa/react-actioncable-provider

Connect React and Action Cable, with React 16 support

ActionCable Provider for React

This package provides an ActionCable context provider and consumer to allow you to subscribe to ActionCable channels in your React components.

Requirements

As this package uses React's new Context API, React 16.3+ is required.

Run npx browserslist to see default, not ie 11 option in .browserslistrc compatibility. There is no IE 11 support starting in version 4.0.0.

Install

npm install --save @thrash-industries/react-actioncable-provider
# OR
yarn add @thrash-industries/react-actioncable-provider

Usage

The public API exports two components that you'll use: <ActionCableProvider /> and <ActionCableConsumer />.

<ActionCableProvider />

The provider is used in an outer container and wraps all of the components that may or may not consume the context. It accepts one of two props: url and cable. Passing url will result in the provider instantiating its own ActionCable.Consumer with that URL. Passing cable allows you to manually instantiate an ActionCable.Consumer on your own and pass it to the provider to be used by all descendent consumers.

With url

<ActionCableProvider url="ws://test.example.com/cable">...</ActionCableProvider>

With cable

import ActionCable from "actioncable";

const cable = ActionCable.createConsumer("ws://test.example.com/cable");

<ActionCableProvider cable={cable}>...</ActionCableProvider>;

<ActionCableConsumer />

The consumer will wrap an individual component. It accepts several props:

• channel [String] Name of the channel to which you want to subscribe.
• channel [Object] An object with a channel key which denotes the channel to which you want to subscribe. All other keys are passed to the channel as params.
• onConnected [Function] A handler function that is called when the channel connects.
• onDisconnected [Function] A handler function that is called when the channel disconnects.
• onInitialized [Function] A handler function that is called when the ActionCable.Consumer is initialized.
• onRejected [Function] A handler function that is called when the requested subscription is rejected.
• onReceived [Function] A handler function that is called when the channel transmits a message to the client.

import React from "react";
import PropTypes from "prop-types";
import { ActionCableConsumer } from "@thrash-industries/react-actioncable-provider";

export default class Widget extends React.Component {
  static propTypes = {
    message: PropTypes.string
  };

  constructor(...props) {
    super(...props);

    this.handleReceived = this.handleReceived.bind(this);

    this.state = {
      message: ""
    };
  }

  handleReceived(message) {
    this.setState(state => {
      return {
        message
      };
    });
  }

  render() {
    return (
      <ActionCableConsumer
        channel="WidgetChannel"
        onReceived={this.handleReceived}
      >
        <h1>{this.state.message}</h1>
      </ActionCableConsumer>
    );
  }
}

Publishing

• yarn Install dependencies
• yarn test Run tests
• yarn build Build for production
• npm version [patch|minor|major] Increment version
• npm publish Publish to npm

Other Uses

React Native

See https://github.com/cpunion/react-native-actioncable

Server Side Rendering

See cpunion#8

Example: https://github.com/cpunion/react-actioncable-ssr-example

react-actioncable-provider's Issues

Migrate from enzyme to react testing library due to security vulnerability, fun

https://testing-library.com/docs/react-testing-library/migrate-from-enzyme/

https://github.com/JackHowa/react-actioncable-provider/security/dependabot/yarn.lock/nth-check/open

security update

Remove create-react-class (perf improvement)

Started on this based on other prs #31

• Ensure package is still compatible with IE 11
• Add any tests you may see fit
• Measure performance improvement

Ensure compatibility for React strict mode

• See pr started #26

• also see beginning of solution https://gist.github.com/fabiobarboza7/7954170aa0b539a5c8591759ec200107 via
  @fabiobarboza7 here cpunion#28

• Tests should pass. They need to be updated

• Test on application despite changes to lifecycle hooks