feat: add createGlobalState hook generator

README.md

@@ -147,6 +147,7 @@
   - [`useMediatedState`](./docs/useMediatedState.md) — like the regular `useState` but with mediation by custom function. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usemediatedstate--demo)
   - [`useFirstMountState`](./docs/useFirstMountState.md) — check if current render is first. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usefirstmountstate--demo)
   - [`useRendersCount`](./docs/useRendersCount.md) — count component renders. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-userenderscount--demo)
+  - [`createGlobalState`](./docs/createGlobalState.md) — cross component shared state.[![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-createglobalstate--demo)
     <br/>
     <br/>
 - [**Miscellaneous**]()

docs/createGlobalState.md

@@ -0,0 +1,32 @@
+# `useGlobalState`
+
+A React hook which creates a globally shared state.
+
+## Usage
+
+```tsx
+const useGlobalValue = createGlobalState<number>(0);
+
+const CompA: FC = () => {
+  const [value, setValue] = useGlobalValue();
+
+  return <button onClick={() => setValue(value + 1)}>+</button>;
+};
+
+const CompB: FC = () => {
+  const [value, setValue] = useGlobalValue();
+
+  return <button onClick={() => setValue(value - 1)}>-</button>;
+};
+
+const Demo: FC = () => {
+  const [value] = useGlobalValue();
+  return (
+    <div>
+      <p>{value}</p>
+      <CompA />
+      <CompB />
+    </div>
+  );
+};
+```

src/createGlobalState.ts

@@ -0,0 +1,31 @@
+import { useLayoutEffect, useState } from 'react';
+import useEffectOnce from './useEffectOnce';
+
+export function createGlobalState<S = any>(initialState?: S) {
+  const store: { state: S | undefined; setState: (state: S) => void; setters: any[] } = {
+    state: initialState,
+    setState(state: S) {
+      store.state = state;
+      store.setters.forEach(setter => setter(store.state));
+    },
+    setters: [],
+  };
+
+  return (): [S | undefined, (state: S) => void] => {
+    const [globalState, stateSetter] = useState<S | undefined>(store.state);
+
+    useEffectOnce(() => () => {
+      store.setters = store.setters.filter(setter => setter !== stateSetter);
+    });
+
+    useLayoutEffect(() => {
+      if (!store.setters.includes(stateSetter)) {
+        store.setters.push(stateSetter);
+      }
+    });
+
+    return [globalState, store.setState];
+  };
+}
+
+export default createGlobalState;

src/index.ts

@@ -106,3 +106,4 @@ export { default as useMeasure } from './useMeasure';
 export { useRendersCount } from './useRendersCount';
 export { useFirstMountState } from './useFirstMountState';
 export { default as useSet } from './useSet';
+export { createGlobalState } from './createGlobalState';

stories/createGlobalState.story.tsx

@@ -0,0 +1,33 @@
+import { storiesOf } from "@storybook/react";
+import React, { FC } from "react";
+import { createGlobalState } from "../src";
+import ShowDocs from "./util/ShowDocs";
+
+const useGlobalValue = createGlobalState<number>(0);
+
+const CompA: FC = () => {
+  const [value, setValue] = useGlobalValue();
+
+  return <button onClick={() => setValue(value + 1)}>+</button>;
+};
+
+const CompB: FC = () => {
+  const [value, setValue] = useGlobalValue();
+
+  return <button onClick={() => setValue(value - 1)}>-</button>;
+};
+
+const Demo: FC = () => {
+  const [value] = useGlobalValue();
+  return (
+    <div>
+      <p>{value}</p>
+      <CompA />
+      <CompB />
+    </div>
+  );
+};
+
+storiesOf("State|createGlobalState", module)
+  .add("Docs", () => <ShowDocs md={require("../docs/createGlobalState.md")} />)
+  .add("Demo", () => <Demo />);

tests/createGlobalState.test.ts

@@ -0,0 +1,21 @@
+import { act, renderHook } from '@testing-library/react-hooks';
+import createGlobalState from '../src/createGlobalState';
+
+describe('useGlobalState', () => {
+  it('should be defined', () => {
+    expect(createGlobalState).toBeDefined();
+  });
+
+  it('both components should be updated', () => {
+    const useGlobalValue = createGlobalState(0);
+    const { result: result1 } = renderHook(() => useGlobalValue());
+    const { result: result2 } = renderHook(() => useGlobalValue());
+    expect(result1.current[0] === 0);
+    expect(result2.current[0] === 0);
+    act(() => {
+      result1.current[1](1);
+    });
+    expect(result1.current[0] === 1);
+    expect(result2.current[0] === 1);
+  });
+});