A simple state manager for local storage in React applications.
npm install create-lsPersistent, Real-Time Storage for React – No State Management Needed Automatically sync local storage across components, tabs, and sessions with ease.
- 🔄 Real-time Sync – Watch and react to local storage changes instantly across components.
- 💾 Persistent State – Data remains intact across page reloads and sessions.
- ⚡ Lightweight & Fast – No dependencies, minimal overhead.
- 🛠 Simple API – Get, set, and reset to changes effortlessly.
- 📡 Cross-Tab Communication – Sync updates across different tabs/windows.
- 🚫 No External State Management – Eliminate the need for Redux, Context API, or Zustand.
This package is published with NPM package provenance, which provides cryptographic proof that this package was built from the source code in this repository using the GitHub Actions workflow.
To verify the provenance of this package:
``bash`
npm audit signatures
This will verify that the package was signed by the trusted GitHub Actions environment and matches the source code in this repository.
Install via your preferred package manager:
`shnpm
npm install create-ls
$3
tsx
"use client";import { createLS } from "create-ls";
const Page: React.FC = () => {
const counter = createLS("count", 0);
return (
Count: {counter.get()}
);
};export default Page;
`🔍 API Reference
$3
A React hook for reading and updating local storage with real-time sync.
#### Parameters
-
(string): The key under which the value is stored in local storage.
- initialValue (T, optional): The initial value to set if the key does not exist in local storage.
If not provided, the value will be an empty string if the key does not exist.#### Returns
- An object with the following properties:
-
get: A function to retrieve the current value from local storage.
- set: A function to update the value in local storage and trigger re-renders.
- reset: A function to reset the value in local storage to the initial value.
- hasValue: A boolean indicating whether the key exists in local storage.$3
A function to retrieve the current value from local storage.
Returns
- The current value stored in local storage for the specified key.
$3
A function to update the value in local storage and trigger re-renders.
Parameters
-
value (T): The new value to set in local storage.Returns
-
void$3
A function to reset the value in local storage to the initial value.
Returns
-
$3
A boolean indicating whether the key exists in local storage.
Returns
-
: true if the key exists in local storage, false otherwise.💡 Examples
$3
`tsx
"use client";import { createLS } from "create-ls";
const Page: React.FC = () => {
const counter = createLS("count", 0);
return (
{counter.hasValue() ? (
Count: {counter.get()}
) : (
Click the button to set the count
)}
);
};export default Page;
`$3
tsx
"use client";import { createLS } from "create-ls";
const Page: React.FC = () => {
const counter1 = createLS("count1", 0);
const counter2 = createLS("count2", 0);
return (
Count 1: {counter1.get()}
Count 2: {counter2.get()}
);
};export default Page;
``Contributions are welcome! To contribute:
1. Fork the repository.
2. Create a feature branch.
3. Commit your changes.
4. Open a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
---
This package is developed and maintained by JP.Coffee. Feel free to reach out or open an issue for any questions or suggestions!