https://github.com/skorotkiewicz/react-atomize-store
A lightweight state management library that simplifies state handling in your applications. Easily manage and update your app's state with minimal code.
https://github.com/skorotkiewicz/react-atomize-store
indexeddb react redux state-management store
Last synced: 3 months ago
JSON representation
A lightweight state management library that simplifies state handling in your applications. Easily manage and update your app's state with minimal code.
- Host: GitHub
- URL: https://github.com/skorotkiewicz/react-atomize-store
- Owner: skorotkiewicz
- Created: 2023-05-30T01:46:09.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-06-01T11:35:52.000Z (about 2 years ago)
- Last Synced: 2025-03-01T19:49:01.512Z (3 months ago)
- Topics: indexeddb, react, redux, state-management, store
- Language: TypeScript
- Homepage:
- Size: 65.4 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-atomize-store
> A lightweight state management library that simplifies state handling in your applications. Easily manage and update your app's state with minimal code. With built-in support for IndexedDB, it provides a seamless way to persist your state, making it perfect for storing login tokens or other sensitive information securely. Enjoy the convenience of automatic storage and retrieval, ensuring your data is always available when needed.
## Install
```
yarn add react-atomize-store
or
npm i react-atomize-store
```
## Usage
```jsx
// App.tsx
import React from "react";
import { useStore } from "react-atomize-store";
const App = () => {
useStore(
{
count: 0,
username: "adam",
feeds: [],
keypair: {},
},
true, // Enable Redux DevTools Extension
["keypair"] // atoms to store in IndexedDB
);
return
App;
};
export default App;
```
Use it everywhere in your React app, just like the simple useState hook.
```jsx
// Dashboard.tsx
import React from "react";
import { useAtom } from "react-atomize-store";
const Dashboard = () => {
const [feeds, setFeeds] = useAtom("feeds");
const [count, setCount] = useAtom("count");
// Adding a new item to the 'feeds' array
setFeeds((prev) => [...prev, feed]);
// Overwriting the 'feeds' array with an empty array
setFeeds([]);
// Removing an element from the 'feeds' array
setFeeds((prev) => prev.filter((item) => item.id !== feedId));
setCount((prev) => prev + 1);
console.log(feeds, count);
return
Dashboard;
};
export default Dashboard;
```