A minimalistic, flexible, TypeScript oriented state management for React app.
Install & Import:
# NPM $ npm i jotai --save
import React from "react"; import { Provider, atom, useAtom } from "jotai";
Basic Usage:
const textAtom = atom("hello"); const textLenAtom = atom((get) => get(textAtom).length); const uppercaseAtom = atom((get) => get(textAtom).toUpperCase()); const Input = () => { const [text, setText] = useAtom(textAtom); return <input value={text} onChange={(e) => setText(e.target.value)} />; }; const CharCount = () => { const [len] = useAtom(textLenAtom); return <div>Length: {len}</div>; }; const Uppercase = () => { const [uppercase] = useAtom(uppercaseAtom); return <div>Uppercase: {uppercase}</div>; }; const App = () => ( <Provider> <Input /> <CharCount /> <Uppercase /> </Provider> ); export default App;
Preview:
Download Details:
Author: react-spring
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/react-spring/jotai
License: MIT