Flexible State Management For React – jotai

Author:react-spring
Views Total:13 views
Official Page:Go to website
Publish Date:September 14, 2020
License:MIT

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:

You Might Be Interested In:

Leave a Reply