Skip to main content

useLocalStorage()

The useLocalStorage() hook is a quick way to set, read, and manage localStorage values. It comes with automatic JSON serialization/deserialization.

Import

import { useLocalStorage } from 'react-haiku';

Usage

Storage Value:
import { useEffect } from 'react'
import { useLocalStorage } from "react-haiku"

export const Component = () => {
const [value, setValue] = useLocalStorage('message');

useEffect(() => {
setValue({ message: 'Hello!' })
}, [])

return (
<>
<b>Storage Value: {value.message}</b>
<button onClick={() => setValue({ message: 'Woah!' })}>Update Storage</button>
</>
);
}

API

This hook accetps the following arguments:

  • key - the key to use for a localStorage entry
  • value - the value corresponding to a certain key, can be a a simple string value or an object