Skip to main content
Module

x/jotai/docs/utils/atom-with-hash.mdx

👻 Primitive and flexible state management for React
Go to Latest
File
---title: atomWithHash---
## Usage
```jsatomWithHash(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 andchanging 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`.
**delayInit** (optional): delay initialization of the atom to when `onMount` is called. See [#739](https://github.com/pmndrs/jotai/issues/739#issuecomment-929260696). Defaults to `true`.
**replaceState** (optional): when the atom value is changed, replace the current history entry instead of adding a new one. See [#660](https://github.com/pmndrs/jotai/issues/660). Defaults to `false`.
**subscribe** (optional): custom hash change subscribe function
## Examples
```jsximport { useAtom } from 'jotai'import { atomWithHash } from 'jotai/utils'const countAtom = atomWithHash('count', 1)const Counter = () => { const [count, setCount] = useAtom(countAtom) return ( <> <div>count: {count}</div> <button onClick={() => setCount((c) => c + 1)}>button</button> </> )}```
## Codesandbox
<CodeSandbox id="d5kn6" />## Deleting Item
Please refer [atomWithStorage](../utils/atom-with-storage.mdx)for the usage about deleting items.