14619387290

Committed 23 Apr 2025 01:27PM UTC coverage: 100.0% (+3.6%) from 96.429%

Build # 14619387290

Build Type

Pull #5

github

Committed by

alessiofrittoli

Commit Message

minor improvements

Pull Request Pull Request #5: docs: add `useStorage` API Reference

Run Details

11 of 11 branches covered (100.0%)

Branch coverage included in aggregate %.

1 of 1 new or added line in 1 file covered. (100.0%)

15 of 15 relevant lines covered (100.0%)

7.07 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

100.0

/src/browser-api/storage/useStorage.ts

import { useCallback, useEffect, useState } from 'react'
import { LocalStorage } from '@alessiofrittoli/web-utils/storage/LocalStorage'
import { SessionStorage } from '@alessiofrittoli/web-utils/storage/SessionStorage'

type Value<T>                = T | undefined | null
type SetValue<T>        = React.Dispatch<React.SetStateAction<T>>

/**
 * Easly handle Local or Session Storage State.
 * 
 * @param        key                                The storage item key.
 * @param        initialValue        The storage item initial value.
 * @param        type                        ( Optional ) The storage API to use. Default: `local`.
 */
export const useStorage = <T = string>(
        key                                : string,
        initialValue?        : T,
        type                        : 'local' | 'session' = 'local'
): [ Value<T>, SetValue<Value<T>> ] => {

        const readValue = useCallback( () => (
                ( type === 'local' ? LocalStorage : SessionStorage )
                        .get<T>( key ) ?? initialValue
        ), [ type, key, initialValue ] )


        /**
         * State to store our value.
         * Pass initial state function to useState so logic is only executed once.
         * 
         */
        const [ storedValue, setStoredValue ] = useState<Value<T>>( initialValue )

        /**
         * Return a wrapped version of useState's setter function that
         * persists the new value to localStorage | sessionStorage.
         * 
         * @param value The SetStateAction value.
         */
        const setValue = useCallback<SetValue<Value<T>>>( value => {

                setStoredValue( storedValue => {
                        const valueToStore = value instanceof Function ? value( storedValue ) : value
        
                        ;(
                                typeof window !== 'undefined' &&
                                type === 'local' ? LocalStorage : SessionStorage
                        ).set( key, valueToStore )

                        return valueToStore
                } )


        }, [ type, key ] )

        useEffect( () => {
                setStoredValue( readValue() )
        }, [ readValue ] )

        return [ storedValue, setValue ]
}

1	import { useCallback, useEffect, useState } from 'react'	1✔
2	import { LocalStorage } from '@alessiofrittoli/web-utils/storage/LocalStorage'	1✔
3	import { SessionStorage } from '@alessiofrittoli/web-utils/storage/SessionStorage'	1✔
4
5	type Value<T> = T \| undefined \| null
6	type SetValue<T> = React.Dispatch<React.SetStateAction<T>>
7
8	/**
9	* Easly handle Local or Session Storage State.
10	*
11	* @param key The storage item key.
12	* @param initialValue The storage item initial value.
13	* @param type ( Optional ) The storage API to use. Default: `local`.
14	*/
15	export const useStorage = <T = string>(	1✔
16	key : string,
17	initialValue? : T,
18	type : 'local' \| 'session' = 'local'	4✔
19	): [ Value<T>, SetValue<Value<T>> ] => {
20
21	const readValue = useCallback( () => (	14✔
22	( type === 'local' ? LocalStorage : SessionStorage )	8✔
23	.get<T>( key ) ?? initialValue
24	), [ type, key, initialValue ] )
25
26
27	/**
28	* State to store our value.
29	* Pass initial state function to useState so logic is only executed once.
30	*
31	*/
32	const [ storedValue, setStoredValue ] = useState<Value<T>>( initialValue )	14✔
33
34	/**
35	* Return a wrapped version of useState's setter function that
36	* persists the new value to localStorage \| sessionStorage.
37	*
38	* @param value The SetStateAction value.
39	*/
40	const setValue = useCallback<SetValue<Value<T>>>( value => {	14✔
41
42	setStoredValue( storedValue => {	4✔
43	const valueToStore = value instanceof Function ? value( storedValue ) : value	4✔
44
45	;(	4✔
46	typeof window !== 'undefined' &&	12✔
47	type === 'local' ? LocalStorage : SessionStorage
48	).set( key, valueToStore )
49
50	return valueToStore	4✔
51	} )
52
53
54	}, [ type, key ] )
55
56	useEffect( () => {	14✔
57	setStoredValue( readValue() )	8✔
58	}, [ readValue ] )
59
60	return [ storedValue, setValue ]	14✔
61	}

alessiofrittoli / react-hooks / 14619387290

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous