Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/IniZio/iniz
:shipit: A reactive state library for ReactJS
https://github.com/IniZio/iniz
preactjs reactjs state-management
Last synced: about 9 hours ago
JSON representation
:shipit: A reactive state library for ReactJS
- Host: GitHub
- URL: https://github.com/IniZio/iniz
- Owner: IniZio
- License: mit
- Created: 2018-07-29T08:14:43.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2023-03-21T02:56:39.000Z (over 1 year ago)
- Last Synced: 2024-07-29T05:23:26.745Z (4 months ago)
- Topics: preactjs, reactjs, state-management
- Language: TypeScript
- Homepage: https://iniz.netlify.app/
- Size: 1.74 MB
- Stars: 90
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Iniz
Iniz is a reactive state library for ReactJS. Try it out on our [website](https://iniz.netlify.app)!
`npm i @iniz/core`
[](https://github.com/inizio/iniz/actions?query=workflow%3ACI)
[](https://codecov.io/gh/IniZio/iniz)
[](https://bundlephobia.com/package/@iniz/core)
[](https://www.npmjs.com/package/@iniz/core)
[](https://www.npmjs.com/package/@iniz/core)
- [Guide](#guide)
- [Getting started](#getting-started)
- [Create an atom](#create-an-atom)
- [Mutate the atom value](#mutate-the-atom-value)
- [Subscribe to atom](#subscribe-to-atom)
- [React ⚛](#react-)
- [Credits](#credits)
## Guide
### Getting started
#### Create an atom / store
```ts
import { atom, store } from "@iniz/core";
const timer$ = atom(new Date());
const nested$ = store({
obj: {
array: [{ count: 3 }],
message: "Hello World",
},
async reset() {
this.array = [];
this.message = "Good bye";
},
});
```
#### Mutate the atom value
Call the atom to read/write it.
```ts
// Initial value
timer$(); // Returns latest value e.g. `2019-08-31T00:00:00.000Z`
// Mutate the atom / state
setInterval(() => {
nested$.obj.array[0].count++;
timer$(new Date());
}, 1000);
// Later on...
timer$(); // Returns latest value e.g. `2022-08-31T00:00:00.000Z`
nested$.obj.array[0].count;
nested$.reset();
```
#### Subscribe to atom
Use `effect()` to subscribe to value change.
```ts
const dispose = effect(() => {
console.log("Updated timer: ", timer$());
});
// Execute `dispose` to stop effect
dispose();
```
Use `computed()` to get calculated value from multiple atoms.
```ts
const timerAndCounter$ = computed(
() => `Computed: '${nestedCounter$().obj.array[0]}' '${timer$()}'`
);
timerAndCounter$(); // Returns "Computed: 2022-08-31T00:00:00.000Z 4"
```
### React ⚛
`npm i @iniz/react`
> `@iniz/react` already re-exports `@iniz/core`, so don't need to install `@iniz/core` yourself
Simply use `atom()` values in components, they will re-render correctly thanks to [useSyncExternalStore](https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore)
```tsx
import { useAtom, useComputed } from "@iniz/react";
// The component won't re-render when `nestedCounter$().obj.array[0].count` is updated
function MessageInput() {
// Equivalient to `atom()`
const counter = useAtom(10);
// Equivalent to `computed()`
const computedCounter = useComputed(
() => `Computed: ${nestedCounter$$().obj.message}`
);
// Equivalent to `effect()`
// NOTE: You can also use `useEffect` with atoms actually
useSideEffect(() => {
console.log("[Latest message] ", computedCounter());
});
return (
counter(counter() + 1)}>{counter()}++
(nestedCounter$().obj.message = evt.target())}
/>
);
}
```
## Credits
- [pmndrs/valtio](https://github.com/pmndrs/valtio): The original snapshot idea
- [tomasklaen/statin](https://github.com/tomasklaen/statin): Use function call to get/set atom value
- [RisingStack/react-easy-state](https://github.com/RisingStack/react-easy-state): Original implementation for `useAtom`