13 | {children}
14 |
15 | )
16 | }
17 |
--------------------------------------------------------------------------------
/tests/vanilla/utils/atomWithRefresh.test.ts:
--------------------------------------------------------------------------------
1 | import { describe, expect, it } from 'vitest'
2 | import { createStore } from 'jotai/vanilla'
3 | import { atomWithRefresh } from 'jotai/vanilla/utils'
4 |
5 | describe('atomWithRefresh', () => {
6 | it('[DEV-ONLY] throws when refresh is called with extra arguments', () => {
7 | const atom = atomWithRefresh(() => {})
8 | const store = createStore()
9 | const args = ['some arg'] as unknown as []
10 | expect(() => store.set(atom, ...args)).throws()
11 | })
12 | })
13 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/config.yml:
--------------------------------------------------------------------------------
1 | blank_issues_enabled: false
2 | contact_links:
3 | - name: Bug Reports
4 | url: https://github.com/pmndrs/jotai/discussions/new?category=bug-report
5 | about: Please post bug reports here.
6 | - name: Questions
7 | url: https://github.com/pmndrs/jotai/discussions/new?category=q-a
8 | about: Please post questions here.
9 | - name: Other Discussions
10 | url: https://github.com/pmndrs/jotai/discussions/new/choose
11 | about: Please post ideas and general discussions here.
12 |
--------------------------------------------------------------------------------
/.github/workflows/preview-release.yml:
--------------------------------------------------------------------------------
1 | name: Preview Release
2 |
3 | on: [push, pull_request]
4 |
5 | jobs:
6 | preview_release:
7 | runs-on: ubuntu-latest
8 | steps:
9 | - uses: actions/checkout@v6
10 | - uses: pnpm/action-setup@v4
11 | - uses: actions/setup-node@v6
12 | with:
13 | node-version: 'lts/*'
14 | cache: 'pnpm'
15 | - run: pnpm install
16 | - run: pnpm run build
17 | - run: pnpm dlx pkg-pr-new publish './dist' --compact --template './examples/*'
18 |
--------------------------------------------------------------------------------
/website/src/hooks/index.js:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect } from 'react'
2 |
3 | export const useOnEscape = (handler) => {
4 | const handleEscape = useCallback(
5 | ({ code }) => {
6 | if (code === 'Escape') {
7 | handler()
8 | }
9 | },
10 | [handler],
11 | )
12 |
13 | useEffect(() => {
14 | document.addEventListener('keydown', handleEscape, false)
15 |
16 | return () => {
17 | document.removeEventListener('keydown', handleEscape, false)
18 | }
19 | }, [handleEscape])
20 | }
21 |
--------------------------------------------------------------------------------
/examples/starter/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
4 |
12 |
13 | )
14 | }
15 |
--------------------------------------------------------------------------------
/examples/text_length/README.md:
--------------------------------------------------------------------------------
1 | # Text Length [](https://stackblitz.com/github/pmndrs/jotai/tree/main/examples/text_length)
2 |
3 | ## Description
4 |
5 | Count the length and show the uppercase of any text.
6 |
7 | ## Set up locally
8 |
9 | ```bash
10 | git clone https://github.com/pmndrs/jotai
11 |
12 | # install project dependencies & build the library
13 | cd jotai && pnpm install
14 |
15 | # move to the examples folder & install dependencies
16 | cd examples/text_length && pnpm install
17 |
18 | # start the dev server
19 | pnpm dev
20 | ```
21 |
22 | ## Set up on `StackBlitz`
23 |
24 | Link: https://stackblitz.com/github/pmndrs/jotai/tree/main/examples/text_length
25 |
--------------------------------------------------------------------------------
/src/vanilla/utils/atomWithReducer.ts:
--------------------------------------------------------------------------------
1 | import { atom } from '../../vanilla.ts'
2 | import type { WritableAtom } from '../../vanilla.ts'
3 |
4 | export function atomWithReducer
17 |
19 | Length: {len}
15 | }
16 |
17 | const Uppercase = () => {
18 | const [uppercase] = useAtom(uppercaseAtom)
19 | return Uppercase: {uppercase}
20 | }
21 |
22 | const App = () => (
23 |
15 | {tokens.map((line, i) => (
16 |
17 | {line.map((token, key) => (
18 |
19 | ))}
20 |
21 | ))}
22 |
23 | )}
24 |
10 |
11 |
20 |
23 |
24 |
,
26 | )
27 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "esnext",
4 | "strict": true,
5 | "jsx": "react-jsx",
6 | "esModuleInterop": true,
7 | "module": "esnext",
8 | "moduleResolution": "bundler",
9 | "skipLibCheck": true /* FIXME remove this once vite fixes it */,
10 | "allowImportingTsExtensions": true,
11 | "noUncheckedIndexedAccess": true,
12 | "exactOptionalPropertyTypes": true,
13 | "verbatimModuleSyntax": true,
14 | "declaration": true,
15 | "isolatedDeclarations": true,
16 | "types": ["@testing-library/jest-dom"],
17 | "noEmit": true,
18 | "baseUrl": ".",
19 | "paths": {
20 | "jotai": ["./src/index.ts"],
21 | "jotai/*": ["./src/*.ts"]
22 | }
23 | },
24 | "include": ["src/**/*", "tests/**/*", "benchmarks/**/*"],
25 | "exclude": ["node_modules", "dist"]
26 | }
27 |
--------------------------------------------------------------------------------
/website/src/components/code-sandbox.js:
--------------------------------------------------------------------------------
1 | export const CodeSandbox = ({ id, tests }) => {
2 | return (
3 | 12 | Jōtai 13 |
14 |
20 | Primitive and flexible state management for React.
21 | 状態
22 |
23 |
4 |
14 |
15 | )
16 | }
17 |
--------------------------------------------------------------------------------
/examples/todos/README.md:
--------------------------------------------------------------------------------
1 | # Todos [](https://stackblitz.com/github/pmndrs/jotai/tree/main/examples/todos)
2 |
3 | ## Description
4 |
5 | Record your todo list by typing them into this app, check them if you have completed the task, and switch between `Completed` and `Incompleted` to see the status of your task.
6 |
7 | ## Set up locally
8 |
9 | ```bash
10 | git clone https://github.com/pmndrs/jotai
11 |
12 | # install project dependencies & build the library
13 | cd jotai && pnpm install
14 |
15 | # move to the examples folder & install dependencies
16 | cd examples/todos && pnpm install
17 |
18 | # start the dev server
19 | pnpm dev
20 | ```
21 |
22 | ## Set up on `StackBlitz`
23 |
24 | Link: https://stackblitz.com/github/pmndrs/jotai/tree/main/examples/todos
25 |
--------------------------------------------------------------------------------
/src/vanilla/utils.ts:
--------------------------------------------------------------------------------
1 | export { RESET } from './utils/constants.ts'
2 | export { atomWithReset } from './utils/atomWithReset.ts'
3 | export { atomWithReducer } from './utils/atomWithReducer.ts'
4 | export { atomFamily } from './utils/atomFamily.ts'
5 | export { selectAtom } from './utils/selectAtom.ts'
6 | export { freezeAtom, freezeAtomCreator } from './utils/freezeAtom.ts'
7 | export { splitAtom } from './utils/splitAtom.ts'
8 | export { atomWithDefault } from './utils/atomWithDefault.ts'
9 | export {
10 | atomWithStorage,
11 | createJSONStorage,
12 | withStorageValidator as unstable_withStorageValidator,
13 | } from './utils/atomWithStorage.ts'
14 | export { atomWithObservable } from './utils/atomWithObservable.ts'
15 | export { loadable } from './utils/loadable.ts'
16 | export { unwrap } from './utils/unwrap.ts'
17 | export { atomWithRefresh } from './utils/atomWithRefresh.ts'
18 | export { atomWithLazy } from './utils/atomWithLazy.ts'
19 |
--------------------------------------------------------------------------------
/docs/guides/vite.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Vite
3 | description: How to use Jotai with Vite
4 | nav: 8.99
5 | keywords: vite
6 | published: false
7 | ---
8 |
9 | You can use the plugins from the `jotai/babel` bundle to enhance your developer experience when using Vite and Jotai.
10 |
11 | In your `vite.config.ts`:
12 |
13 | ```js
14 | import { defineConfig } from 'vite'
15 | import react from '@vitejs/plugin-react'
16 | import jotaiDebugLabel from 'jotai/babel/plugin-debug-label'
17 | import jotaiReactRefresh from 'jotai/babel/plugin-react-refresh'
18 |
19 | // https://vitejs.dev/config/
20 | export default defineConfig({
21 | plugins: [
22 | react({ babel: { plugins: [jotaiDebugLabel, jotaiReactRefresh] } }),
23 | ],
24 | // ... The rest of your configuration
25 | })
26 | ```
27 |
28 | There's a template below to try it yourself.
29 |
30 | ### Examples
31 |
32 | #### Vite Template
33 |
34 | {children}
19 |
20 |
13 |
15 | {title}
16 |
17 | {body}
18 |
19 |
20 | )
21 | }
22 |
23 | export const Head = ({ data }) => {
24 | const { slug, frontmatter } = data.mdx
25 | const { title, description } = frontmatter
26 | const uri = `docs/${slug}`
27 |
28 | return
29 | }
30 |
31 | export const pageQuery = graphql`
32 | query PageQuery($slug: String) {
33 | mdx(slug: { eq: $slug }) {
34 | slug
35 | frontmatter {
36 | title
37 | description
38 | }
39 | body
40 | }
41 | }
42 | `
43 |
--------------------------------------------------------------------------------
/examples/todos_with_atomFamily/README.md:
--------------------------------------------------------------------------------
1 | # Todos with atomFamily [](https://stackblitz.com/github/pmndrs/jotai/tree/main/examples/todos_with_atomFamily)
2 |
3 | > **⚠️ Note:** `atomFamily` from `jotai/utils` is deprecated and will be removed in v3. For new projects, please use the [`jotai-family`](https://github.com/jotaijs/jotai-family) package instead.
4 |
5 | ## Description
6 |
7 | Implement a todo list using atomFamily and localStorage, you can store your todo list to localStorage by click `Save to localStorage`, then remove your todo list and restore them by click `Load from localStorage`.
8 |
9 | ## Set up locally
10 |
11 | ```bash
12 | git clone https://github.com/pmndrs/jotai
13 |
14 | # install project dependencies & build the library
15 | cd jotai && pnpm install
16 |
17 | # move to the examples folder & install dependencies
18 | cd examples/todos_with_atomFamily && pnpm install
19 |
20 | # start the dev server
21 | pnpm dev
22 | ```
23 |
24 | ## Set up on `StackBlitz`
25 |
26 | Link: https://stackblitz.com/github/pmndrs/jotai/tree/main/examples/todos_with_atomFamily
27 |
--------------------------------------------------------------------------------
/examples/text_length/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 
29 |
31 | )
32 | }
33 |
34 | export default function App() {
35 | return (
36 | {time}
30 |
10 |
43 | )
44 | }
45 |
--------------------------------------------------------------------------------
/website/src/components/mdx.js:
--------------------------------------------------------------------------------
1 | import { getAnchor } from '../utils/index.js'
2 |
3 | export const H2 = ({ children }) => {
4 | const anchor = getAnchor(children)
5 | const link = `#${anchor}`
6 |
7 | return (
8 |
11 |
21 |
31 |
40 |
41 |
42 | 9 | {children} 10 |
11 | ) 12 | } 13 | 14 | export const H3 = ({ children }) => { 15 | const anchor = getAnchor(children) 16 | const link = `#${anchor}` 17 | 18 | return ( 19 |20 | {children} 21 |
22 | ) 23 | } 24 | 25 | export const H4 = ({ children }) => { 26 | const anchor = getAnchor(children) 27 | const link = `#${anchor}` 28 | 29 | return ( 30 |31 | {children} 32 |
33 | ) 34 | } 35 | 36 | export const H5 = ({ children }) => { 37 | const anchor = getAnchor(children) 38 | const link = `#${anchor}` 39 | 40 | return ( 41 |42 | {children} 43 |
44 | ) 45 | } 46 | 47 | export const A = ({ href, children, ...rest }) => { 48 | if (href.startsWith('http')) { 49 | return ( 50 | 51 | {children} 52 | 53 | ) 54 | } 55 | 56 | const newHref = href.replace('.mdx', '') 57 | 58 | return ( 59 | 60 | {children} 61 | 62 | ) 63 | } 64 | -------------------------------------------------------------------------------- /docs/extensions/zustand.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Zustand 3 | description: This doc describes Zustand extension. 4 | nav: 4.98 5 | keywords: zustand 6 | published: false 7 | --- 8 | 9 | Jotai's state resides in React, but sometimes it would be nice 10 | to interact with the world outside React. 11 | 12 | Zustand provides a store interface that can be used to hold some values 13 | and sync with atoms in Jotai. 14 | 15 | This only uses the vanilla api of zustand. 16 | 17 | ### Install 18 | 19 | You have to install `zustand` and `jotai-zustand` to use this feature. 20 | 21 | ``` 22 | npm install zustand jotai-zustand 23 | ``` 24 | 25 | ## atomWithStore 26 | 27 | `atomWithStore` creates a new atom with zustand store. 28 | It's two-way binding and you can change the value from both ends. 29 | 30 | ```jsx 31 | import { useAtom } from 'jotai' 32 | import { atomWithStore } from 'jotai-zustand' 33 | import create from 'zustand/vanilla' 34 | 35 | const store = create(() => ({ count: 0 })) 36 | const stateAtom = atomWithStore(store) 37 | const Counter = () => { 38 | const [state, setState] = useAtom(stateAtom) 39 | 40 | return ( 41 | <> 42 | count: {state.count} 43 | 48 | 49 | ) 50 | } 51 | ``` 52 | 53 | ### Examples 54 | 55 |count: {count}
21 | )
22 | }
23 |
24 | const Controls = () => {
25 | // setCount === update: (draft: Draft
36 |
39 |
40 | {count}
41 |
42 |
43 | {code}
44 |
45 | )
46 | }
47 |
--------------------------------------------------------------------------------
/src/vanilla/utils/atomWithDefault.ts:
--------------------------------------------------------------------------------
1 | import { atom } from '../../vanilla.ts'
2 | import type { WritableAtom } from '../../vanilla.ts'
3 | import { RESET } from './constants.ts'
4 |
5 | type Read
48 | {count}
49 |
50 |
51 |
52 | )
53 | }
54 | ```
55 |
56 | \n
\n Hello Jotai
\nEnjoy coding!
\ncurrent count: {count}
63 | }
64 | ```
65 |
66 | ### Stackblitz
67 |
68 |
9 |
29 |
10 | 
15 |
19 |
15 |
16 | v2
17 |
18 |
20 |
28 | Welcome to Jotai v2!
21 |
22 | Fully compatible with React 18 and the upcoming{' '}
23 | use hook. Now with a store interface
24 | that can be used outside of React.
25 |
26 | Enjoy the new “Getting started” experience below!
27 |
26 |
48 |
49 | )
50 | }
51 |
--------------------------------------------------------------------------------
/src/vanilla/utils/selectAtom.ts:
--------------------------------------------------------------------------------
1 | import { atom } from '../../vanilla.ts'
2 | import type { Atom } from '../../vanilla.ts'
3 |
4 | const getCached = {by}
52 |{new Date(time * 1000).toLocaleDateString('en-US')}
53 | {title &&{title}
} 54 | {url && {url}} 55 | {text &&{Parser(text)}
}
56 |
57 | )
58 | }
59 |
60 | export default function App() {
61 | return (
62 |
65 | Loading...}>
66 |
68 |
69 |
8 |
9 |
10 |
23 |
50 | )
51 | }
52 |
53 | const Headline = ({ mainTitle = false, children, ...rest }) => {
54 | return mainTitle ? (
55 |
31 |
49 |
37 | 状態
38 |
39 |
46 | Primitive and flexible state management for React
47 |
48 | {children}
56 | ) : ( 57 |{children}
58 | ) 59 | } 60 | -------------------------------------------------------------------------------- /examples/mega-form/src/initialValue.ts: -------------------------------------------------------------------------------- 1 | const initialValue: RecordUppercase: {uppercase}
45 | )
46 | }
47 |
48 | // Now you have the components
49 | const App = () => {
50 | return (
51 | <>
52 |
53 |
61 |
66 |
62 |
63 |
65 | {code}
67 |
68 | )
69 | }
70 |
--------------------------------------------------------------------------------
/docs/index.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Documentation
3 | description: Table of contents
4 | nav: 0
5 | ---
6 |
7 | Welcome to the Jotai v2 documentation! Jotai's atomic approach to global React state management scales from a simple `useState` replacement to an enterprise application with complex requirements.
8 |
9 | ## Features
10 |
11 | - Minimal core API (2kb)
12 | - Many utilities and extensions
13 | - TypeScript oriented
14 | - Works with Next.js, Waku, Remix, and React Native
15 |
16 | ## Core
17 |
18 | Jotai has a very minimal API, exposing only a few exports from the main `jotai` bundle. They are split into four categories below.
19 |
20 |
51 |
63 | )
64 | }
65 | ```
66 |
--------------------------------------------------------------------------------
/docs/core/provider.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Provider
3 | description: This doc describes core `jotai` bundle.
4 | nav: 2.04
5 | keywords: provider,usestore,ssr
6 | ---
7 |
8 | ## Provider
9 |
10 | The `Provider` component is to provide state for a component sub tree.
11 | Multiple Providers can be used for multiple subtrees, and they can even be nested.
12 | This works just like React Context.
13 |
14 | If an atom is used in a tree without a Provider,
15 | it will use the default state. This is so-called provider-less mode.
16 |
17 | Providers are useful for three reasons:
18 |
19 | 1. To provide a different state for each sub tree.
20 | 2. To accept initial values of atoms.
21 | 3. To clear all atoms by remounting.
22 |
23 | ```jsx
24 | const SubTree = () => (
25 | Style preview
52 |
53 | {/* Clicking this button twice will only trigger one render */}
54 |
57 |
58 | {/* Clicking this button twice will only trigger one render */}
59 |
62 | count: {count}
18 |pet: {pet}
19 | 20 | ) 21 | } 22 | 23 | const store = createStore() 24 | store.set(countAtom, 0) 25 | store.set(petAtom, 'dog') 26 | 27 | render( 28 |count: {count}
50 |pet: {pet}
51 | 52 | ) 53 | } 54 | 55 | const store = createStore() 56 | store.set(petAtom, 'dog') 57 | 58 | render( 59 |Uppercase: {uppercase}
41 | }
42 |
43 | // Now you have the components
44 | const MyApp = () => (
45 |
46 |
47 |
49 | )
50 | `
51 |
52 | const App = () => (
53 |
54 |
69 | )
70 |
71 | export default App
72 |
--------------------------------------------------------------------------------
/tests/vanilla/basic.test.tsx:
--------------------------------------------------------------------------------
1 | import { expect, it } from 'vitest'
2 | import { atom } from 'jotai/vanilla'
3 |
4 | it('creates atoms', () => {
5 | // primitive atom
6 | const countAtom = atom(0)
7 | const anotherCountAtom = atom(1)
8 | // read-only derived atom
9 | const doubledCountAtom = atom((get) => get(countAtom) * 2)
10 | // read-write derived atom
11 | const sumCountAtom = atom(
12 | (get) => get(countAtom) + get(anotherCountAtom),
13 | (get, set, value: number) => {
14 | set(countAtom, get(countAtom) + value / 2)
15 | set(anotherCountAtom, get(anotherCountAtom) + value / 2)
16 | },
17 | )
18 | // write-only derived atom
19 | const decrementCountAtom = atom(null, (get, set) => {
20 | set(countAtom, get(countAtom) - 1)
21 | })
22 | delete countAtom.debugLabel
23 | delete doubledCountAtom.debugLabel
24 | delete sumCountAtom.debugLabel
25 | delete decrementCountAtom.debugLabel
26 | expect({
27 | countAtom,
28 | doubledCountAtom,
29 | sumCountAtom,
30 | decrementCountAtom,
31 | }).toMatchInlineSnapshot(`
32 | {
33 | "countAtom": {
34 | "init": 0,
35 | "read": [Function],
36 | "toString": [Function],
37 | "write": [Function],
38 | },
39 | "decrementCountAtom": {
40 | "init": null,
41 | "read": [Function],
42 | "toString": [Function],
43 | "write": [Function],
44 | },
45 | "doubledCountAtom": {
46 | "read": [Function],
47 | "toString": [Function],
48 | },
49 | "sumCountAtom": {
50 | "read": [Function],
51 | "toString": [Function],
52 | "write": [Function],
53 | },
54 | }
55 | `)
56 | })
57 |
58 | it('should let users mark atoms as private', () => {
59 | const internalAtom = atom(0)
60 | internalAtom.debugPrivate = true
61 | delete internalAtom.debugLabel
62 |
63 | expect(internalAtom).toMatchInlineSnapshot(`
64 | {
65 | "debugPrivate": true,
66 | "init": 0,
67 | "read": [Function],
68 | "toString": [Function],
69 | "write": [Function],
70 | }
71 | `)
72 | })
73 |
--------------------------------------------------------------------------------
/website/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "jotai-website",
3 | "version": "0.0.0",
4 | "description": "👻 Primitive and flexible state management for React",
5 | "homepage": "https://github.com/pmndrs/jotai",
6 | "bugs": "https://github.com/pmndrs/jotai/issues",
7 | "license": "MIT",
8 | "author": "Sophia Michelle Andren A simple example:
55 |
56 |
68 |
57 |
64 |
58 |
59 |
63 |
60 |
62 |
65 |
67 |
50 | Value of a: {a}
51 | Value of b: {b}
52 |
53 |
54 |
55 | )
56 | }
57 | ```
58 |
59 | #### Stackblitz
60 |
61 | -
28 | {todoList.map((todo) => (
29 |
- {todo.description} 30 | ))} 31 |
Current balance ${dollars}
77 | 78 | 79 | 80 | 81 | ) 82 | } 83 | ``` 84 | 85 | ### Examples 86 | 87 |You have {messages.length} messages
57 |58 | {messages.map((message) => ( 59 |
{message.text}
60 | ))}
61 |
62 | )
63 | }
64 | ```
65 |
--------------------------------------------------------------------------------
/website/src/styles/layout.css:
--------------------------------------------------------------------------------
1 | html {
2 | overflow: visible !important;
3 | padding-right: 0 !important;
4 | }
5 |
6 | body {
7 | @apply overflow-x-clip overflow-y-scroll overscroll-none bg-black leading-none font-sans;
8 | text-rendering: optimizeLegibility;
9 | -webkit-tap-highlight-color: transparent;
10 | }
11 |
12 | #___gatsby {
13 | @apply bg-white text-black dark:bg-gray-950 dark:text-gray-50;
14 | }
15 |
16 | #___gatsby > div {
17 | opacity: 0;
18 | animation: fadeIn cubic-bezier(0.4, 0, 0.2, 1) 0.5s;
19 | animation-iteration-count: 1;
20 | animation-fill-mode: forwards !important;
21 | animation-delay: 0.7s;
22 | }
23 |
24 | @keyframes fadeIn {
25 | 0% {
26 | opacity: 0;
27 | }
28 | 100% {
29 | opacity: 1;
30 | }
31 | }
32 |
33 | pre,
34 | code,
35 | pre span,
36 | code span {
37 | font-family: 'Fira Code', monospace !important;
38 | }
39 |
40 | ::selection {
41 | @apply bg-black text-white dark:bg-gray-50 dark:text-gray-950;
42 | }
43 |
44 | a,
45 | button {
46 | @apply transition-all duration-300 ease-in-out;
47 | }
48 |
49 | *:focus {
50 | outline: 0 !important;
51 | }
52 |
53 | a,
54 | button,
55 | input,
56 | select,
57 | textarea {
58 | @apply relative z-0;
59 | }
60 |
61 | a:focus,
62 | button:focus,
63 | input:focus,
64 | select:focus,
65 | textarea:focus {
66 | @apply z-10 ring-blue-400 dark:!ring-teal-700;
67 | }
68 |
69 | input[type='search']::-webkit-search-decoration,
70 | input[type='search']::-webkit-search-cancel-button,
71 | input[type='search']::-webkit-search-results-button,
72 | input[type='search']::-webkit-search-results-decoration {
73 | @apply appearance-none;
74 | }
75 |
76 | svg:not([fill]) {
77 | fill: currentColor;
78 | }
79 |
80 | *::-webkit-scrollbar {
81 | @apply h-full w-4 bg-white dark:bg-gray-950;
82 | }
83 |
84 | body.dark::-webkit-scrollbar {
85 | @apply bg-gray-950;
86 | }
87 |
88 | *::-webkit-scrollbar-track {
89 | @apply bg-white dark:bg-gray-950;
90 | }
91 |
92 | body.dark::-webkit-scrollbar-track {
93 | @apply bg-gray-950;
94 | }
95 |
96 | *::-webkit-scrollbar-thumb {
97 | @apply rounded-2xl border-4 border-solid border-white bg-gray-350 dark:border-gray-950 dark:bg-gray-800;
98 | }
99 |
100 | body.dark::-webkit-scrollbar-thumb {
101 | @apply border-gray-950 bg-gray-800;
102 | }
103 |
104 | *::-webkit-scrollbar-button {
105 | @apply hidden;
106 | }
107 |
--------------------------------------------------------------------------------
/docs/recipes/atom-with-broadcast.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: atomWithBroadcast
3 | nav: 9.09
4 | keywords: creators,broadcast
5 | ---
6 |
7 | > `atomWithBroadcast` creates an atom. The atom will be shared between
8 | > browser tabs and frames, similar to `atomWithStorage` but with the
9 | > initialization limitation.
10 |
11 | This can be useful when you want states to interact with each other without the use of localStorage.
12 | By using the BroadcastChannel API, you can enable basic communication between browsing contexts such as windows, tabs, frames, components, or iframes, and workers on the same origin.
13 | According to the MDN documentation, receiving a message during initialization is not supported in the BroadcastChannel, but if you want to support that functionality, you may need to add extra option to atomWithBroadcast, such as local storage.
14 |
15 | ```tsx
16 | import { atom, SetStateAction } from 'jotai'
17 |
18 | export function atomWithBroadcast
67 | {count}
68 |
69 |
70 | )
71 | }
72 | ```
73 |
74 |
22 |
54 | )
55 | }
56 |
--------------------------------------------------------------------------------
/website/src/components/meta.js:
--------------------------------------------------------------------------------
1 | import { graphql, useStaticQuery } from 'gatsby'
2 |
3 | export const Meta = ({ lang = 'en', title, description, uri }) => {
4 | const data = useStaticQuery(staticQuery)
5 |
6 | const { site } = data
7 |
8 | const siteTitle = site.siteMetadata.title
9 | const siteUrl = site.siteMetadata.siteUrl
10 | const siteIcon = `/favicon.svg`
11 | const socialMediaCardImage = `https://cdn.candycode.com/jotai/jotai-opengraph-v2.png`
12 | const shortName = site.siteMetadata.shortName
13 |
14 | const pageTitle = title
15 | ? `${title} — ${title.length <= 10 ? siteTitle : shortName}`
16 | : siteTitle
17 | const pageDescription = description || site.siteMetadata.description
18 | const pageUrl = uri ? `${siteUrl}/${uri}` : siteUrl
19 |
20 | return (
21 | <>
22 |
23 |
53 |
24 |
32 |
25 |
27 | 28 | Jotai docs 29 |
30 |
33 |
41 |
51 |
52 |
74 |
79 | )
80 | }
81 | ```
82 |
83 | #### Examples
84 |
85 | ID: {data.id}
75 | Height: {data.height}
76 | Weight: {data.weight}
77 |
78 |