@sazzadur/react-store-hook-test

@sazzadur/react-store-hook-test is a simple and efficient React hook for managing state using React Context and localStorage. This package provides a way to store and retrieve state in a React application while ensuring persistence across page reloads.

Installation

You can install the package via npm:

npm install @sazzadur/react-store-hook-test`

Or via yarn:

yarn add @sazzadur/react-store-hook-test`

Or via pnpm:

pnpm add @sazzadur/react-store-hook-test`

Features

• State Management: Manage global state using React Context.
• LocalStorage Support: Automatically persist state in localStorage.
• TypeScript Support: Written in TypeScript for type safety and better developer experience.
• Easy to Use: Simple API for setting and getting values.

Usage

Setting Up the Store Provider

Wrap your application with the StoreProvider to provide the context to your components:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { StoreProvider } from "@sazzadur/react-store-hook-test`";

ReactDOM.render(
	<React.StrictMode>
		<StoreProvider>
			<App />
		</StoreProvider>
	</React.StrictMode>,
	document.getElementById("root")
);

Using the useStore Hook

You can use the useStore hook to manage state in your components. Pass a unique key for the state, an initial value, and optionally whether to persist the state in localStorage.

import React from "react";
import useStore from "@sazzadur/react-store-hook-test`";

const MyComponent = () => {
	const [value, setValue, isLoading] = useStore<string>("myKey", "initialValue");

	if (isLoading) {
		return <div>Loading...</div>;
	}

	return (
		<div>
			<p>Value: {value}</p>
			<button onClick={() => setValue("newValue")}>Update Value</button>
		</div>
	);
};

export default MyComponent;

API

StoreProvider

The StoreProvider component should be used at the root of your component tree to provide the store context to your components.

useStore<T>(key: string, initialValue?: T, storeInLocalStorage?: boolean): [T, (value: T | ((val: T) => T)) => void, boolean]

• key: A unique key to identify the stored value.
• initialValue: The initial value for the state.
• storeInLocalStorage (optional): Whether to store the state in localStorage (default is true).

Returns an array containing:

1. The current state value.
2. A function to update the state.
3. A boolean indicating if the data is loading.

TypeScript Support

This package includes TypeScript definitions, so you can use it with TypeScript without additional setup.