https://github.com/sidwebworks/zen-state
Dead simple state-management
https://github.com/sidwebworks/zen-state
Last synced: 8 months ago
JSON representation
Dead simple state-management
- Host: GitHub
- URL: https://github.com/sidwebworks/zen-state
- Owner: sidwebworks
- License: mit
- Created: 2022-09-23T23:32:26.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-09-24T12:18:16.000Z (over 3 years ago)
- Last Synced: 2025-09-29T12:40:25.310Z (9 months ago)
- Language: TypeScript
- Size: 124 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Zen
[](https://npm.im/@sidww/zen) [](https://npm.im/@sidwebworks/get-packages)
> Dead simple state-management
- 📦 Tiny (less than 1kb)
- 🔩 Typesafe APIs
- ⚡️ React and Selectors support
## Install
```bash
npm i @sidww/zen
```
## Usage
```ts
import { zen } from "@sidww/zen"
const todos = zen([{ id: 1, completed: false, title: "Idk man" }])
```
### Reading from state
```ts
const value = todos.read()
```
### Writing to state
```ts
todos.write([]) // Clear all todos
// Or if the next state depends on previous one
todos.write((prev) => [
...prev,
{ id: 123, title: "Last one", completed: true },
])
// U can also directly use the .read() method instead
```
### Subscribing to changes
```ts
todos.subscribe((state) => {
console.log("CHANGE: ", state)
})
```
### Usage with React
```ts
import { useZen } from "@sidww/zen/react"
const todos = useZen(todosZen);
```
#### Selector support
```ts
import { useZen } from "@sidww/zen/react"
const firstTodo = useZen(todosZen, (s) => s[0]);
```
Type docs: https://paka.dev/npm/@sidww/zen
## Mentions
Strongly inspired by some of my favourite state libraries [Jotai](https://jotai.org) and [Valtio](https://valtio.pmnd.rs)
## License
MIT © [sidwebworks](https://github.com/sponsors/sidwebworks)