Location
To deal with window.location
, we have some functions to create atoms.
Install
You have to install jotai-location
to use this feature.
npm i jotai-location
atomWithLocation
atomWithLocation(options): PrimitiveAtom
atomWithLocation
creates a new atom that links to window.location
.
Parameters
options (optional): an object of options to customize the behavior of the atom
Options
preloaded (optional): preloaded location value to avoid getting location at initialization.
replace (optional): a boolean to indicate to use replaceState
instead of pushState
.
getLocation (optional): a custom function to get location value.
applyLocation (optional): a custom function to set location value.
subscribe (optional): a custom function to subscribe to location change.
Examples
import { useAtom } from 'jotai'import { atomWithLocation } from 'jotai-location'const locationAtom = atomWithLocation()const App = () => {const [loc, setLoc] = useAtom(locationAtom)return (<ul><li><buttonstyle={{fontWeight: loc.pathname === '/' ? 'bold' : 'normal',}}onClick={() => setLoc((prev) => ({ ...prev, pathname: '/' }))}>Home</button></li><li><buttonstyle={{fontWeight:loc.pathname === '/foo' && !loc.searchParams?.get('bar')? 'bold': 'normal',}}onClick={() =>setLoc((prev) => ({...prev,pathname: '/foo',searchParams: new URLSearchParams(),}))}>Foo</button></li><li><buttonstyle={{fontWeight:loc.pathname === '/foo' && loc.searchParams?.get('bar') === '1'? 'bold': 'normal',}}onClick={() =>setLoc((prev) => ({...prev,pathname: '/foo',searchParams: new URLSearchParams([['bar', '1']]),}))}>Foo?bar=1</button></li></ul>)}
Codesandbox
atomWithHash
atomWithHash(key, initialValue, options): PrimitiveAtom
This creates a new atom that is connected with URL hash. The hash must be in the URLSearchParams format. It's a two-way binding: changing the atom value will change the hash and changing the hash will change the atom value. This function works only with DOM.
Parameters
key (required): a unique string used as the key when syncing state with localStorage, sessionStorage, or AsyncStorage
initialValue (required): the initial value of the atom
options (optional): an object of options to customize the behavior of the atom
Options
serialize (optional): a custom function to serialize the atom value to the hash. Defaults to JSON.stringify
.
deserialize (optional): a custom function to deserialize the hash to the atom value. Defaults to JSON.parse
.
subscribe (optional): custom hash change subscribe function
setHash (optional): replaceState
or a custom function that describes how hash gets updated on the side of the browser. Defaults to pushing a new entry to the history via window.location.hash = searchParams
(jotai-location#4)
Examples
import { useAtom } from 'jotai'import { atomWithHash } from 'jotai-location'const countAtom = atomWithHash('count', 1)const Counter = () => {const [count, setCount] = useAtom(countAtom)return (<div><div>count: {count}</div><button onClick={() => setCount((c) => c + 1)}>+1</button></div>)}
Codesandbox
Deleting Item
Please refer atomWithStorage for the usage about deleting items.