mustafadalga / state-syncer

A simple state management library for React.js applications.

State Syncer

A simple state management library for React.js applications.

Installation

npm i state-syncer

Usage

You 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>
    )
}

License