React hook that persist data in sessionStorage

npm install use-session-storage-state@17

• Clone of use-local-storage-state that I've been maintaining for the past 2 years.
• SSR support with handling of hydration mismatches.
• Handles the Window storage event and updates changes across browser tabs, windows, and iframe's.
• In-memory fallback when sessionStorage throws an error and can't store the data. Provides a isPersistent API to let you notify the user their data isn't currently being stored.
• Aiming for high-quality with my open-source principles.

import useLocalStorageState from 'use-session-storage-state'

export default function Todos() {
    const [todos, setTodos] = useLocalStorageState('todos', {
        ssr: true,
        defaultValue: ['buy avocado', 'do 50 push-ups']
    })
}

import React, { useState } from 'react'
import useLocalStorageState from 'use-session-storage-state'

export default function Todos() {
    const [todos, setTodos] = useLocalStorageState('todos', {
        ssr: true,
        defaultValue: ['buy avocado']
    })
    const [query, setQuery] = useState('')

    function onClick() {
        setQuery('')
        setTodos([...todos, query])
    }

    return (
        <>
            <input value={query} onChange={e => setQuery(e.target.value)} />
            <button onClick={onClick}>Create</button>
            {todos.map(todo => (
                <div>{todo}</div>
            ))}
        </>
    )
}

import useLocalStorageState from 'use-session-storage-state'

export default function Todos() {
    const [todos, setTodos] = useLocalStorageState('todos', {
        ssr: true,
        defaultValue: ['buy avocado', 'do 50 push-ups']
    })
}

import React, { useState } from 'react'
import useLocalStorageState from 'use-session-storage-state'

export default function Todos() {
    const [todos, setTodos, { isPersistent }] = useSessionStorageState('todos', {
        defaultValue: ['buy avocado']
    })

    return (
        <>
            {todos.map(todo => (<div>{todo}</div>))}
            {!isPersistent && <span>Changes aren't currently persisted.</span>}
        </>
    )
}

import useSessionStorageState from 'use-session-storage-state'

export default function Todos() {
    const [todos, setTodos, { removeItem }] = useSessionStorageState('todos', {
        defaultValue: ['buy avocado']
    })

    function onClick() {
        removeItem()
    }
}

Returns [value, setValue, { removeItem, isPersistent }] when called. The first two values are the same as useState(). The third value contains two extra properties:

• removeItem() — calls sessionStorage.removeItem(key) and resets the hook to it's default state
• isPersistent — boolean property that returns false if sessionStorage is throwing an error and the data is stored only in-memory

Type: string

The key used when calling sessionStorage.setItem(key) and sessionStorage.getItem(key).

⚠️ Be careful with name conflicts as it is possible to access a property which is already in sessionStorage that was created from another place in the codebase or in an old version of the application.

Type: any

Default: undefined

The default value. You can think of it as the same as useState(defaultValue).

Type: boolean

Default: false

Enables SSR support and handles hydration mismatches. Not enabling this can cause the following error: Warning: Expected server HTML to contain a matching .... This is the only library I'm aware of that handles this case. For more, see discussion here.

Type: boolean

Default: true

Setting to false doesn't subscribe to the Window storage event. If you set to false, updates won't be synchronized across tabs, windows and iframes.

• use-local-storage-state — A clone of this library but for localStorage.