useLocalStorage

useLocalStorage is a custom hook for storing, updating, and retrieving values in local storage.

const [value, setValue, resetValue] = useLocalStorage<number>({
  key: "value",
  defaultValue: 1,
})

return (
  <Wrap gap="md">
    <Button onClick={() => setValue((prev) => prev + 1)}>
      Current Local Storage value: {value}
    </Button>

    <Button colorScheme="danger" onClick={resetValue}>
      Reset Local Storage value
    </Button>
  </Wrap>
)

If you use this code, you need to add "use client" to the top of the file.

Usage

import { useLocalStorage } from "@yamada-ui/react"

import { useLocalStorage } from "@/components/ui"

import { useLocalStorage } from "@workspaces/ui"

const [value, setValue, resetValue] = useLocalStorage<number>({
  key: "value",
  defaultValue: 1,
})