react-easy-state-management v1.4.9

Here’s a refined and professional version of your README.md file for React Easy State Management:

React Easy State Management

A Professional State Management Library for React Applications

Table of Contents

• Overview
• Installation
• Usage
  • Provider Setup
  • Creating Contexts
  • Custom Hooks
  • Offline Data Storage
• Context Structure
• Contributing
• License
• Author

Overview

React Easy State Management is a lightweight, yet powerful state management library designed to streamline the development of React applications. It supports features like online paging and offline data storage, making it a flexible and professional-grade solution for managing your app’s state.

For detailed documentation, visit the Full Documentation.

Installation

To install React Easy State Management, run the following commands in your project:

npm install react-easy-state-management

or

yarn add react-easy-state-management

Once installed, import the necessary components in your React app:

import { Provider, useEasyState } from "react-easy-state-management";

Usage

Provider Setup

Wrap your root component with the Provider component to initialize state management across your app:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from 'react-easy-state-management';
import contextNames from './context/contextNames';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <Provider contextsList={contextNames}>
      <App />
    </Provider>
  </React.StrictMode>
);

Creating Contexts

Define the contexts for your application by providing initial values for each data structure. For instance:

import { ContextName } from "./contextTypes";

const contextNames: Array<ContextName> = [
  {
    contextName: "userContext",
    initialValue: {
      name: "",
      email: "",
      age: [],
      gender: "",
      location: "",
      bio: "",
      image: "",
      followers: [],
      loading: false,
    },
  },
  {
    contextName: "images",
    initialValue: {
      images: [],
    },
  },
];

Custom Hooks

useEasy()

The useEasy() hook allows you to easily manage state within your components:

function App() {
  const [userState, setState, showLoaderFnc] = useEasy("userContext", {
    users: [],
    name: "",
  });

  const getData = () =>
    showLoaderFnc(async () => {
      try {
        setState({
          users: ["Piyas", "Hakim"],
          name: "Piyas",
        });
      } catch (error) {
        console.error("Error:", error);
      }
    });

  useEffect(() => {
    getData();
  }, []);

  console.log(userState);
}

useEasyOffline()

The useEasyOffline() hook extends the functionality by automatically storing data offline:

function App() {
  const [userState, setState, showLoaderFnc] = useEasyOffline("userContext", {
    users: [],
    name: "",
  });

  const getData = () =>
    showLoaderFnc(async () => {
      try {
        setState({
          users: ["Piyas", "Hakim"],
          name: "Piyas",
        });
      } catch (error) {
        console.error("Error:", error);
      }
    });

  useEffect(() => {
    getData();
  }, []);

  console.log(userState, "userState");
}

Offline Data Storage

With React Easy State Management, saving data offline is simple. Use the dispatch function with the offline option:

import React from "react";
import { useEasyState } from "react-easy-state-management";

function MyComponent() {
  const [userData, userDispatch] = useEasyState("userContext");

  const fetchUserData = async () => {
    try {
      const response = await fetch("https://api.example.com/user-data");
      const user = await response.json();

      userDispatch({
        type: "userData",
        payload: user,
        offline: true,
      });
    } catch (error) {
      console.error("Error fetching user data:", error);
    }
  };
}

Context Structure

Customize the context structure to meet your app’s needs. Each context can have its own structure, making React Easy State Management adaptable for various use cases.

Contributing

Contributions are welcome! To contribute, please fork the repository, create a new branch, and submit a pull request. For issues, feel free to open an issue. We appreciate all feedback and contributions.

License

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

Author

• Piyas Talukder - GitHub

This version of the README.md is structured, informative, and professional. It includes a clear explanation of the features, installation instructions, usage examples, and contribution guidelines, ensuring it is user-friendly for both beginners and experienced developers.