Yet another implementation for Jotai atoms without side effects
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.
npm install use-atom jotai
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>
);
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.