A simple state management library for React.js applications.
npm i state-syncerYou can create your store like this.
usePosts.ts
import { createSlice } from "state-syncer";
type State = {
count: number
}
const initialState: State = {
count: 0,
};
export const { useGlobalState: useCounter } = createSlice(initialState);Then use with relevant components
Counter
import { useCounter } from "@/store/useCounter";
export default function Counter() {
const [ count, setCount ] = useCounter('count');
return (
<div>
<p>Count: {count}</p>
<div>
<button onClick={() => setCount(prevValue => prevValue + 1)}>
Increment
</button>
<button onClick={() => setCount(prevValue => prevValue - 1)}>
Decrement
</button>
</div>
</div>
);
};Foo
import { useCounter } from "@/store/useCounter";
export default function Foo() {
const [ count ] = useCounter('count');
return (
<p>Counter : {count}</p>
)
}