react-happy-global-state

Quick Features

• Manage your global state, just like using the useState hook.
• Built with typescript, provide type protection, code autocompletion, make your app robust.
• Less than 1kB size.

How to use

Install package

npm install react-happy-global-state

Create your store.ts

import { createGlobalState } from 'react-happy-global-state';

// define you GlobalState type
type GlobalState = {
  count: number;
};

// set your default global state
const DEFAULT_GLOBAL_STATE: GlobalState = {
  count: 0,
};

export const { GlobalStateProvider, useGlobalState } = createGlobalState({
  defaultState: DEFAULT_GLOBAL_STATE,
});

Use GlobalStateProvider to wrap your App

import React from 'react';
import { createRoot } from 'react-dom/client';
import { App } from './App';
import { GlobalStateProvider } from './store';

const container = document.getElementById('root');
const root = createRoot(container!);

root.render(
  <React.StrictMode>
    {/* use GlobalStateProvider wrap your App  */}
    <GlobalStateProvider>
      <App />
    </GlobalStateProvider>
  </React.StrictMode>,
);

Use useGlobalState in your Component

import React from 'react';
import { useGlobalState } from './store';

export const Counter = () => {
  // use useGlobalState hook to get/set your global state
  const [count, setCount] = useGlobalState('count');

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
};

Click here to try it by yourself.