Introduction

A flexible and efficient state management library for React applications. Simplify state handling and improve code maintainability.

Installation

You can install this package via npm:

        
            npm install react-easy-state-management

Or you can install this package via yarn:

        
            yarn add react-easy-state-management

Creating Contexts

To get started, you need to create contexts for different data structures in your application. For example: 

                    
import { createContext } from 'react';

export const userContext = createContext(undefined);
export const imagesContext = createContext(undefined);

const contextNames = [
    {
        contextName: 'userContext',
        context: userContext,
        initialValue: {
            name: '',
            email: '',
            age: [],
            gender: '',
            location: '',
            bio: '',
            image: '',
            followers: [],
        }
    },
    {
        contextName: 'imagesContext',
        context: imagesContext,
        initialValue: {
            images: [],
        }
    };

Using Provider

To use this state management package, wrap your components with the <Provider> component. This component allows you to set up context providers for your application. 

                    
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import contextNames from './context/contextNames';
import { Provider } from './context';

const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
);
root.render(
    <React.StrictMode>
        <Provider contextsList={contextNames}>
            <App />
        </Provider>
    </React.StrictMode>
);

Custom Hooks

You can access state and dispatch functions with custom hooks. For example: 

                    
import React, { useEffect } from 'react';
import { imagesContext, userContext } from './context/contextNames';
import { useEasyState } from 'react-easy-state-management';

function App() {
    const [userstate, userDispatch] = useEasyState(userContext);
    const [ImageSate, imageDispatch] = useEasyState(imagesContext);

    useEffect(() => {
        userDispatch({
            type: "name",
            payload: "Piyas",
            offline: true
        });
        imageDispatch({
            type: "username",
            payload: "Piyas",
            offline: false
        });
        userDispatch({
            type: "email",
            payload: "Piyas@gmail.com",
            offline: true
        });
    }, []);

    console.log(userstate);

    return (
        <div className="App">
            {userstate.name}
        </div>
    );
}

export default App;

API

Here are the main components of the API:

Examples

For more examples, check the GitHub repository.

Configuration

Explain any configuration options, if applicable.

Contributing

If you want to contribute to this project, follow the guidelines in the CONTRIBUTING.md file.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contact

If you have questions or need assistance, feel free to contact us at contact@yourwebsite.com.

Your Website: https://sites.google.com/view/piyastalukder/home