Quick Features 🥳
- Easy to 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-stateCreate 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>
);
};