About this package

useSharedState is a simple hook that can be used to share state between multiple React components.

It relies on EventTarget, and as such is only currently supported in browsers. There is a line of code to disable it for SSR environments.

Table of Contents

• Installation
• Usage
  • Creating a shared state
  • Manipulating the state
  • Using the state
• Best Practices
• Examples

Installation

This package can be installed via npm, using :

npm i @scaleup-consulting/use-shared-state

Dependencies:

• react >= v16.8.0

Usage

Creating a shared state

Creating a shared state hook is no different than creating a simple react hook:

//sharedStates.js
import { SharedStateTarget } from "@scaleup-consulting/use-shared-state";
...

//declare the shared state with an initial value
export const SHARED_COUNTER = new SharedStateTarget(0);

...

Manipulating the state

To use and manipulate the shared state function similar to react hook syntax:

const [state, setState] = SHARED_STATE_NAME.useSharedState();

Usage in counter example:

//CounterButtons.jsx
...
import {SHARED_COUNTER} from "./sharedStates"

...


export function CounterButtons() {
  //get shared state and it's setter
  const [count, setCount] = SHARED_COUNTER.useSharedState();

  //use setter function to change the state's value
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increase</button>
      <button onClick={() => setCount(count - 1)}>Decrease</button>
    </div>
  );
}

...

Using the state

You can also subscribe to state's updates without using the setter function with

const [state] = SHARED_STATE_NAME.useSharedState();

Usage in counter example:

//Counter.jsx
...
import {SHARED_COUNTER} from "./sharedStates"

...

export function Counter() {
    //use shared state without setter
    const [count] = SHARED_COUNTER.useSharedState();

    //display state
    return <span>{count}</span>;
}

...

Best Practices

• To make the Shared State easier to debug, there should be only one component responsible for setting the state.

Examples

More examples can be found at useSharedState-examples repository.