@development-laboratories/react-shared-state-hook v1.0.5

react-shared-state-hook

a simple hook for sharing state between sibling components

Installation

npm install @development-laboritories/react-shared-state-hook

or

yarn add @development-laboritories/react-shared-state-hook

Basic Usage

Use the following to import the createSharedHook function which is used to create a hook with shared state:

import { createSharedState } from "@development-laboritories/react-shared-state-hook";

Now we can pass in an initialValue in this case "en" and we get back a new shared state hook:

const useSharedLocale = createSharedState("en");

Next let's add some logic for updating the state and returning the now shared locale

export function useSharedLocale() {
  const [locale, setLocale] = useSharedLocale(); // locale will be "en"

  useEffect(() => {
    const deviceLocale = "fr"; // example value
    setLocale(deviceLocale);
  }, []);

  return locale;
}

To use this value just import the hook above

import { useLocale } from "./useSharedLocale";

function ExampleComponentOne() {
  const locale = useSharedLocale();
  return <p>{locale}</p>;
}

function ExampleComponentTwo() {
  const locale = useSharedLocale();
  return <p>{locale}</p>;
}

function App() {
  return (
    <>
      <ExampleComponentOne />
      <ExampleComponentTwo />
    </>
  );
}

Both of the states will show the same value!