@pex-craft/state

A versatile state management library for React and Next.js.

Installation

npm install @pex-craft/state

Overview

@pex-craft/state provides a set of utilities for state management in your React or Next. js applications. It includes the following key features:

1.Provider: Initialize and manage the application state.

2.useStore: Retrieve specific properties from the state.

3.useDispatch: Update the application state.

Usage

Provider

Provider is used to initialize the state. It takes an initialState prop, allowing you to pass any type of values.

All the app content, including children and any other data, is managed within Provider.

import { Provider } from "@pex-craft/state";

/* `Example usage` */
<Provider initialState={
    {
        app: {
            debug: true,
            anyTypeOfKey: 'anyTypeOfValue'// such as Object,Array,number etc.
        }
    }
}>
  {children}
</Provider>

useStore

useStore is a hook used to retrieve a specific property from the state. Its give an callback that return the specific property from state according to key.

import { useStore } from "@pex-craft/state";

// `Example usage`
const { debug } = useStore(state =>  state.app);

console.log(debug)
/* output in console.log */ 
true // --->debug-->value

useDispatch

useDispatch is a hook used to update the state. Its takes key of the state object to get the value of key that is in the state

import { useDispatch } from "@pex-craft/state";

// Example usage
const dispatch = useDispatch(`app`);
dispatch({ app: { debug: false } });