diff --git a/packages/react/src/hooks/useCookie/useCookie.ts b/packages/react/src/hooks/useCookie/useCookie.ts index 9703311a2..08de6141b 100644 --- a/packages/react/src/hooks/useCookie/useCookie.ts +++ b/packages/react/src/hooks/useCookie/useCookie.ts @@ -12,11 +12,13 @@ interface Attributes { /** * The hook that returns the current value of a cookie, a callback to update the cookie and a callback to remove the cookie. * @param name The name of the cookie. + * @param {boolean} [initial=true] If set true, hook will set initial value. * @returns The current value of a cookie, a callback to update the cookie and a callback to remove the cookie. */ export const useCookie = ( name: string, - defaultValue?: T + defaultValue?: T, + initial?: boolean ): [string | T, (data: string, attributes?: Attributes) => void, () => void] => { const initialValue = useMemo(() => { const cookie = document.cookie.split('; ').find((c) => c.startsWith(`${encodeURIComponent(name)}=`)); @@ -25,6 +27,10 @@ export const useCookie = ( return decodeURIComponent(cookie.slice(cookie.indexOf('=') + 1)); } + if (initial && defaultValue) { + document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(defaultValue)}`; + } + return (defaultValue ?? null) as T; }, []); diff --git a/packages/react/src/hooks/useLocalStorage/useLocalStorage.ts b/packages/react/src/hooks/useLocalStorage/useLocalStorage.ts index 9c9d7244d..f8c3b55c0 100644 --- a/packages/react/src/hooks/useLocalStorage/useLocalStorage.ts +++ b/packages/react/src/hooks/useLocalStorage/useLocalStorage.ts @@ -6,6 +6,7 @@ import { useCallback, useMemo, useState } from 'react'; * @param initialValue The initial value to set, if value in `localStorage` is empty. * @param {Object} options The options object. * @param {boolean} [options.raw=true] If set true, hook will not attempt to JSON serialize stored values. + * @param {boolean} [options.initial=true] If set true, hook will set initial value. * @param {Object} [options.serializer=JSON.stringify] Custom serializer. * @param {Object} [options.deserializer=JSON.parse] Custom deserializer. * @returns The current `localStorage` value, a callback to update the value and a callback to remove the value. @@ -16,6 +17,7 @@ export const useLocalStorage = ( initialValue?: T, options?: { raw?: boolean; + initial?: boolean; serializer?: (value: T) => string; deserializer?: (value: string) => T; } @@ -30,6 +32,10 @@ export const useLocalStorage = ( return raw ? storageValue : deserializer(storageValue); } + if (options?.initial) { + localStorage.setItem(key, raw ? (initialValue as unknown as string) : serializer(initialValue)); + } + return initialValue ?? null; } catch { return initialValue ?? null; @@ -48,7 +54,7 @@ export const useLocalStorage = ( const remove = useCallback(() => { localStorage.removeItem(key); - setValue(initialValue ?? null); + setValue(null); }, [key, initialValue]); return [value, update, remove]; diff --git a/packages/react/src/hooks/useSessionStorage/useSessionStorage.ts b/packages/react/src/hooks/useSessionStorage/useSessionStorage.ts index ec595fff1..b28a4c96d 100644 --- a/packages/react/src/hooks/useSessionStorage/useSessionStorage.ts +++ b/packages/react/src/hooks/useSessionStorage/useSessionStorage.ts @@ -6,6 +6,7 @@ import { useCallback, useMemo, useState } from 'react'; * @param initialValue The initial value to set, if value in `sessionStorage` is empty. * @param {Object} options The options object. * @param {boolean} [options.raw=true] If set true, hook will not attempt to JSON serialize stored values. + * @param {boolean} [options.initial=true] If set true, hook will set initial value. * @param {Object} [options.serializer=JSON.stringify] Custom serializer. * @param {Object} [options.deserializer=JSON.parse] Custom deserializer. * @returns The current `sessionStorage` value, a callback to update the value and a callback to remove the value. @@ -16,6 +17,7 @@ export const useSessionStorage = ( initialValue?: T, options?: { raw?: boolean; + initial?: boolean; serializer?: (value: T) => string; deserializer?: (value: string) => T; } @@ -30,6 +32,10 @@ export const useSessionStorage = ( return raw ? storageValue : deserializer(storageValue); } + if (options?.initial) { + localStorage.setItem(key, raw ? (initialValue as unknown as string) : serializer(initialValue)); + } + return initialValue ?? null; } catch { return initialValue ?? null; @@ -48,7 +54,7 @@ export const useSessionStorage = ( const remove = useCallback(() => { sessionStorage.removeItem(key); - setValue(initialValue ?? null); + setValue(null); }, [key, initialValue]); return [value, update, remove];