https://github.com/devzgabriel/lupi
https://github.com/devzgabriel/lupi
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/devzgabriel/lupi
- Owner: devzgabriel
- Created: 2025-02-07T21:58:08.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-02-07T22:26:13.000Z (3 months ago)
- Last Synced: 2025-02-07T22:42:15.446Z (3 months ago)
- Language: TypeScript
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Lupi: State management as easy as possible
Lupi is a state management library that is designed to be as easy to use as possible.
## Features
- **Ready-to-use Hook**: Lupi has a ready-to-use hook that you can use to create a store in your React components.
- **Type-safe**: Lupi is written in TypeScript, so you can be sure that your store is type-safe.
- **Persistency**: Lupi can persist your store in the browser's local storage automatically if you provide a `storageKey` option.
- **Security**: If you provide a `encryptKey` string, Lupi will encrypt your store before saving it to the local storage.
- **Actions**: You can define actions to modify the store and abstract the logic from the components.
## WIP Features
- **Validation**: Lupi will have a validation feature that allows you to validate the store's state.
## Installation
You can install Lupi using npm:
```bash
npm install lupi
```
or using yarn:
```bash
yarn add lupi
```
## Example Usage
Here is an example of how to use the `createStore` from the `lupi` library in a React component:
```tsx
import { createStore } from 'lupi';
import './App.css';
const useCounter = createStore(0);
function MyChildComponent() {
const { state: counter, copyWith } = useCounter();
return copyWith(counter + 1)}>count is {counter};
}
function AnotherChildComponent() {
const { state: counter, copyWith } = useCounter();
return copyWith(counter - 1)}>count is {counter};
}
function App() {
const { state: counter } = useCounter();
return (
Simple Counter
Count is {counter}
);
}
export default App;
```
## Options
You can pass an object as the second argument to the `createStore` function to configure the store:
```tsx
const useCounter = createStore(0, {
// The key to save the store in the local storage
storageKey: 'counter',
// The key to encrypt the store, if empty, the data will be saved as plain text
// Recommended to use if you want to save sensitive data
encryptKey: 'my-secret-key',
actions: {
// You can define actions to modify the store
increment: (state: number) => state + 1,
decrement: (state: number) => state - 1,
// You can also pass a payload to the action
equation: (state: number, numberA: number, numberB: number) => (state * numberA) / numberB,
},
});
```