react-easy-state-management
v1.4.9
Published
Here’s a refined and professional version of your `README.md` file for **React Easy State Management**:
Downloads
100
Readme
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
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.