1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import { atom, useAtom } from 'jotai'// @ts-ignoreimport PrismCode from 'react-prism'import 'prismjs'import 'prismjs/components/prism-jsx.min'
const textAtom = atom<string>('hello')const uppercaseAtom = atom((get) => get(textAtom).toUpperCase())
const Input = () => {  const [text, setText] = useAtom(textAtom)  return (    <input      className="bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded py-2 px-4 block w-full appearance-none leading-normal"      value={text}      onChange={(e) => setText(e.target.value)}    />  )}
const Uppercase = () => {  const [uppercase] = useAtom(uppercaseAtom)  return <>{uppercase}</>}
const code = `import { atom, useAtom } from 'jotai'
// Create your atoms and derivativesconst textAtom = atom('hello')const uppercaseAtom = atom((get) => get(textAtom).toUpperCase())
// Use them anywhere in your appconst Input = () => {  const [text, setText] = useAtom(textAtom)  return <input value={text} onChange={(e) => setText(e.target.value)} />}
const Uppercase = () => {  const [uppercase] = useAtom(uppercaseAtom)  return <div>Uppercase: {uppercase}</div>}
// Now you have the componentsconst MyApp = () => (  <div>    <Input />    <Uppercase />  </div>)`
const App = () => (  <div>    <p>A simple example:</p>    <div>      <div className="py-8 text-sm">        <div className="relative">          <Input />          <div className="absolute top-0 right-0 h-full flex items-center mr-4 font-bold">            <Uppercase />          </div>        </div>      </div>      <div>        <PrismCode component="pre" className="language-jsx" children={code} />      </div>    </div>  </div>)
export default App