0.9.0 • Published 1 year ago
use-atom v0.9.0
use-atom
Yet another implementation for Jotai atoms without side effects
Introduction
This library used to be a former library to jotai.
It's now rewritten to follow jotai API and depends on
use-context-selector.
The biggest difference is that side effects in write
is not allowed.
Install
npm install use-atom jotai
Usage
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider, atom, useAtom } from 'use-atom';
const countAtom = atom(0);
const textAtom = atom('hello');
const Counter = () => {
const [count, setCount] = useAtom(countAtom);
return (
<div>
{Math.random()}
<div>
<span>Count: {count}</span>
<button type="button" onClick={() => setCount(count + 1)}>+1</button>
<button type="button" onClick={() => setCount((c) => c - 1)}>-1</button>
</div>
</div>
);
};
const TextBox = () => {
const [text, setText] = useAtom(textAtom);
return (
<div>
{Math.random()}
<div>
<span>Text: {text}</span>
<input value={text} onChange={(event) => setText(event.target.value)} />
</div>
</div>
);
};
const App = () => (
<Provider>
<h1>Counter</h1>
<Counter />
<Counter />
<h1>TextBox</h1>
<TextBox />
<TextBox />
</Provider>
);
Examples
The examples folder contains working examples. You can run one of them with
PORT=8080 npm run examples:01_minimal
and open http://localhost:8080 in your web browser.
0.9.0
1 year ago
0.8.0
2 years ago
0.7.0
2 years ago
0.6.1
2 years ago
0.6.0
2 years ago
0.5.7
4 years ago
0.5.6
4 years ago
0.5.5
4 years ago
0.5.4
4 years ago
0.5.3
4 years ago
0.5.2
4 years ago
0.5.0
4 years ago
0.5.1
4 years ago
0.4.0
4 years ago
0.3.0
4 years ago
0.2.3
4 years ago
0.1.0
4 years ago
0.2.0
4 years ago
0.0.0
4 years ago