useLocalStorage

useLocalStorageは、ローカルストレージに値を保持・更新・取得するカスタムフックです。

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>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

使い方

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,
})