react-subscription-hook

Introduction

react-subscription-hook is a React functional component hook which creates a subscription object that can be used with the useSubscription hook.
This allows for data to be shared between components by using the same subscription object.
Each being updated as another has their state updated.

Installation

To install run the following command:

``shell npm install @noxy/react-subscription-hook@latest`

Typescript types are already available in the library so no need to get external types.

`Usage`

The following is an example of how to use the component:

`typescript jsx import {createSubscription, useSubscription, trackSubscription} from "@noxy/react-subscription-hook"; import React, {HTMLProps, useContext} from "react";

const subscription = createSubscription(0);

function TestComponent(props: HTMLProps) { const [value, setValue] = useSubscription(subscription); const [other] = useSubscription(subscription); trackSubscription(subscription, value => console.log(value)); return ( <>


      
        Current value:
        {value}
      

      
        Another value:
        {other}
      

    
  );
  
  function onButtonValueClick() {
    setValue(value + 1);
  }
  
  function onButtonOtherClick() {
    setValue((state) => state + 2);
  }
}

The createSubscription creates a Subscriptionobject with an initial value that can be used with the useSubscription hook.useSubscription takes a Subscriptionobject to return a tuple containing the current value and a value updating function.trackSubscription takes a Subscription` object and a callback function. The callback is called whenever the underlying subscription value changes.

Usage

The following is an example of how to use the component:

typescript jsx
import {createSubscription, useSubscription, trackSubscription} from "@noxy/react-subscription-hook";
import React, {HTMLProps, useContext} from "react";

const subscription = createSubscription(0);

function TestComponent(props: HTMLProps) {
  const [value, setValue] = useSubscription(subscription);
  const [other] = useSubscription(subscription);
  
  trackSubscription(subscription, value => console.log(value));
  
  return (
    <>

Current value:
{value}

Another value:
{other}

);

function onButtonValueClick() {
setValue(value + 1);
}

function onButtonOtherClick() {
setValue((state) => state + 2);
}
}

The createSubscription creates a Subscription

 object with an initial value that can be used with the useSubscription hook.

useSubscription takes a Subscription

 object to return a tuple containing the current value and a value updating function.

trackSubscription takes a Subscription` object and a callback function. The callback is called whenever the underlying subscription value changes.