https://github.com/react-earth/react-happy-global-state
Easy to manage your global state, just like using the useState hook.
https://github.com/react-earth/react-happy-global-state
Last synced: 4 months ago
JSON representation
Easy to manage your global state, just like using the useState hook.
- Host: GitHub
- URL: https://github.com/react-earth/react-happy-global-state
- Owner: react-earth
- License: mit
- Created: 2023-06-12T14:08:37.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-09-07T06:23:32.000Z (over 1 year ago)
- Last Synced: 2025-06-06T08:37:36.345Z (12 months ago)
- Language: TypeScript
- Size: 870 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
## 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
```shell
npm install react-happy-global-state
```
### Create your store.ts
```tsx
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
```tsx
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(
{/* use GlobalStateProvider wrap your App */}
,
);
```
### Use useGlobalState in your Component
```tsx
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 (
{count}
setCount(count + 1)}>Increment
setCount(count - 1)}>Decrement
);
};
```
Click [here](https://codesandbox.io/s/demo-5fvh56?file=/src/App.tsx) to try it by yourself.