useLocalStorage

Sync state to local storage so that it persists through a page refresh.

https://www.shaktools.com/shak-hooks

State

API Reference

Installation

terminal

pnpm add @shak-hooks/usehooks

import.ts

import { useLocalStorage } from "@shak-hooks/usehooks";

Source: packages/react/src/useLocalStorage.ts

Signature

signature.ts

export function useLocalStorage<T>(key: string, initialValue: T, options: StorageOptions<T> = {})

Parameters

Name	Type	Optional	Default
key	string	No	-
initialValue	T	No	-
options	StorageOptions<T>	Yes	{}

Returns

unknown

Implementation

use-local-storage.ts

1import { useState, useEffect } from "react";

3export function useLocalStorage<T>(key: string, initialValue: T) {

4 const [storedValue, setStoredValue] = useState<T>(() => {

5 try {

6 const item = window.localStorage.getItem(key);

7 return item ? JSON.parse(item) : initialValue;

8 } catch (error) {

9 console.log(error);

10 return initialValue;

11 }

12 });

14 const setValue = (value: T | ((val: T) => T)) => {

15 try {

16 const valueToStore = value instanceof Function ? value(storedValue) : value;

17 setStoredValue(valueToStore);

18 window.localStorage.setItem(key, JSON.stringify(valueToStore));

19 } catch (error) {

20 console.log(error);

21 }

22 };

24 return [storedValue, setValue] as const;

25}

Google Ads

Usage

example.tsx

1import { useLocalStorage } from "@shak-hooks/usehooks";

3const result = useLocalStorage("...", undefined, undefined);

4// result: unknown

5// Use values directly (React state).