react-create-shared-state

Reacts useState hook but with shared state across components.

Usage

Demo

import { createSharedState } from 'react-create-shared-state';

const useTheme = createSharedState('light');

function App {
  return (
    <Toolbar />
    <ThemeSwitch />
  );
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const [theme] = useTheme();
  return <Button theme={theme} />;
}

function ThemeSwitch {
  const [theme, setTheme] = useTheme();
  return (
    <Button
      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
    >
      {theme}
    </Button>
  );
}