Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/quiibz/particule
Fine-grained atomic React state management library
https://github.com/quiibz/particule
atom dispatch react recoil redux state state-management
Last synced: 21 days ago
JSON representation
Fine-grained atomic React state management library
- Host: GitHub
- URL: https://github.com/quiibz/particule
- Owner: QuiiBz
- License: mit
- Created: 2021-09-10T15:14:05.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2021-12-26T13:41:47.000Z (almost 3 years ago)
- Last Synced: 2024-10-06T11:15:15.812Z (about 1 month ago)
- Topics: atom, dispatch, react, recoil, redux, state, state-management
- Language: TypeScript
- Homepage: https://particule.vercel.app/
- Size: 564 KB
- Stars: 34
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
particule
Fine-grained atomic React state management library
yarn add particule
---
- [✨ Features](#-features)
- [🚀 Examples](#-examples)
- [Basic](#basic)
- [Fine-grained](#fine-grained)
- [Composition](#composition)
- [Suspense](#suspense)
- [Dispatch](#dispatch)
- [Custom `atom` with hooks](#custom-atom-with-hooks)
- [📚 Documentation](#-documentation)
- [License](#license)
**Particule** is an atomic React state management library inspired by the best of [Recoil](https://recoiljs.org/), [Jotai](https://jotai.pmnd.rs/) and [Redux](https://redux.js.org/). You can choose **which component subscribe to which state** and so **avoid useless re-render and computations**.
## ✨ Features
- **Super-easy** API
- **TypeScript** ready
- **Suspense** support
- **Minimal** footprint (1kB gzipped)
- **Hooks** to add functionality
## 🚀 Examples
### Basic
```tsx
const textAtom = atom('Hello world!')
function App() {
const [text, setText] = useAtom(textAtom)
return (
<>
{text}
setText('Updated!')}>Update
>
)
}
```
### Fine-grained
```tsx
const textAtom = atom('Hello world!')
function Text() {
const text = useGetAtom(textAtom)
return
{text}
}
// Won't re-render!
function Button() {
const setText = useSetAtom(textAtom)
return setText('Updated!')}>Update
}
// Won't re-render!
function App() {
return (
<>
>
)
}
```
### Composition
```tsx
const eurosAtom = atom(10)
const dollarsAtom = atom(get => get(eurosAtom) * 1.15)
function App() {
const [euros, setEuros] = useAtom(eurosAtom)
const [dollars, setDollars] = useAtom(dollarsAtom)
return (
<>
setEuros(target.value)} value={euros} />
setDollars(target.value)} value={dollars} />
>
)
}
```
### Suspense
```tsx
const nameAtom = atom(async () => {
const json = await (await fetch("https://randomuser.me/api/")).json();
return json.results[0].name.first;
});
function Name() {
const name = useGetAtom(nameAtom)
return
My name is {name}
}
function App() {
return (
)
}
```
### Dispatch
```tsx
const counterAtom = atom(0)
const dispatchCounter = dispatch(counterAtom, value => ({
increment: (newValue: number) => value + newValue,
decrement: (newValue: number) => value - newValue,
}))
function App() {
const counter = useGetAtom(counterAtom)
return (
<>
{counter}
dispatchCounter('increment', 1)}>Increment
dispatchCounter('decrement', 1)}>Decrement
>
)
}
```
### Custom `atom` with hooks
```tsx
const noZeroAtom = createAtom({
beforeValueSet: (_, value) => {
if (value === 0) {
throw new Error('Cannot set value to 0')
}
return value
}
})
const counterAtom = noZeroAtom(3)
function App() {
const [count, setCount] = useAtom(counterAtom)
return (
<>
{count}
setCount(count => count - 1)}>Reduce
>
)
}
```
## 📚 Documentation
See the website at [particule.vercel.app](https://particule.vercel.app/).
Hosted on [Vercel](https://vercel.com/).
## License
[MIT](./LICENSE)