From cafd887ef00d65ac71c7c6837aae7431cf1cf294 Mon Sep 17 00:00:00 2001 From: Bojun Chai Date: Mon, 20 Apr 2026 22:01:38 +0800 Subject: [PATCH] docs: fix recipe import placeholders --- docs/recipes/atom-with-compare.mdx | 8 ++++++-- docs/recipes/atom-with-toggle-and-storage.mdx | 2 +- docs/recipes/atom-with-toggle.mdx | 2 +- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/docs/recipes/atom-with-compare.mdx b/docs/recipes/atom-with-compare.mdx index 2f88c7beda..ad3ff5f575 100644 --- a/docs/recipes/atom-with-compare.mdx +++ b/docs/recipes/atom-with-compare.mdx @@ -30,10 +30,14 @@ export function atomWithCompare( Here's how you'd use it to make an atom that ignores updates that are shallow-equal: ```ts -import { atomWithCompare } from 'XXX' -import { shallowEquals } from 'YYY' +import { atomWithCompare } from './atomWithCompare' import { CSSProperties } from 'react' +const shallowEquals = (a: CSSProperties, b: CSSProperties) => + Object.keys(a).every( + (key) => Object.is(a[key as keyof CSSProperties], b[key as keyof CSSProperties]), + ) && Object.keys(b).every((key) => key in a) + const styleAtom = atomWithCompare( { backgroundColor: 'blue' }, shallowEquals, diff --git a/docs/recipes/atom-with-toggle-and-storage.mdx b/docs/recipes/atom-with-toggle-and-storage.mdx index 8e64585212..6ea2466b84 100644 --- a/docs/recipes/atom-with-toggle-and-storage.mdx +++ b/docs/recipes/atom-with-toggle-and-storage.mdx @@ -33,7 +33,7 @@ export function atomWithToggleAndStorage( And how it's used: ```js -import { atomWithToggleAndStorage } from 'XXX' +import { atomWithToggleAndStorage } from './atomWithToggleAndStorage' // will have an initial value set to false & get stored in localStorage under the key "isActive" const isActiveAtom = atomWithToggleAndStorage('isActive') diff --git a/docs/recipes/atom-with-toggle.mdx b/docs/recipes/atom-with-toggle.mdx index 2b1198f1bd..780c366ef3 100644 --- a/docs/recipes/atom-with-toggle.mdx +++ b/docs/recipes/atom-with-toggle.mdx @@ -30,7 +30,7 @@ The setter function can have an optional argument to force a particular state, s Here is how it's used. ```js -import { atomWithToggle } from 'XXX' +import { atomWithToggle } from './atomWithToggle' // will have an initial value set to true const isActiveAtom = atomWithToggle(true)