@reause/integrations 0.1.2

package/dist/useIDBKeyval.d.ts

@@ -0,0 +1,139 @@
+//#region useIDBKeyval/index.d.ts
+/**
+ * Custom (de)serialization between the value held in state and the raw value
+ * stored in IndexedDB. Defaults to an identity pair.
+ */
+export interface UseIDBKeyvalSerializer<T> {
+  read: (raw: unknown) => T;
+  write: (value: T) => unknown;
+}
+export interface UseIDBOptions<T> {
+  /**
+   * Allow a custom `window` instance, e.g. working with iframes or in testing
+   * environments.
+   */
+  window?: Window;
+  /**
+   * On error callback.
+   *
+   * @default (error) => console.error(error)
+   */
+  onError?: (error: unknown) => void;
+  /**
+   * Write the default value to the store when the key does not exist.
+   *
+   * @default true
+   */
+  writeDefaults?: boolean;
+  /**
+   * Custom data serialization.
+   */
+  serializer?: UseIDBKeyvalSerializer<T>;
+  /**
+   * Listen to changes from other tabs through a `BroadcastChannel`, useful for
+   * multi-tab applications.
+   *
+   * @default true
+   */
+  listenToStorageChanges?: boolean;
+  /**
+   * Watch for deep changes.
+   *
+   * Accepted for upstream parity only — **no effect**: React has no deep
+   * observation, so writes happen explicitly through `setData` (see the
+   * divergence notes on `useIDBKeyval`).
+   *
+   * @default true
+   */
+  deep?: boolean;
+  /**
+   * Use a shallow reference.
+   *
+   * Accepted for upstream parity only — **no effect**: React state is always
+   * replaced wholesale.
+   *
+   * @default false
+   */
+  shallow?: boolean;
+  /**
+   * The flush timing of the (upstream) watcher.
+   *
+   * Accepted for upstream parity only — **no effect**: React has no watcher to
+   * flush, so writes happen explicitly through `setData` (see the divergence
+   * notes on `useIDBKeyval`).
+   *
+   * @default 'pre'
+   */
+  flush?: 'pre' | 'post' | 'sync' | 'async';
+}
+/**
+ * Reactive companion state of `useIDBKeyval` — the React replacement for the
+ * upstream `isFinished` / `isSupported` refs (issue §2B tuple family).
+ */
+export interface UseIDBKeyvalControls {
+  /**
+   * Whether the initial read from the store has finished (successfully or
+   * with an error).
+   */
+  isFinished: boolean;
+  /**
+   * Whether the `BroadcastChannel` API is available in the current browser.
+   */
+  isSupported: boolean;
+}
+/**
+ * React return type: `[data, setData, controls]` — the state-like tuple family
+ * used by `useStateWithControl` and `useStorage` (issue §2B). `data` is
+ * `T | null` where `null` means the key was removed from the store.
+ */
+export type UseIDBKeyvalReturn<T> = [data: T | null, setData: (value: T | null) => Promise<void>, controls: UseIDBKeyvalControls];
+/**
+ * Reactive [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API)
+ * store — React port of VueUse's `useIDBKeyval`.
+ *
+ * Map from @vueuse/integrations `useIDBKeyval`
+ * (`source/vueuse/packages/integrations/useIDBKeyval/`), a reactive wrapper
+ * around [`idb-keyval`](https://github.com/jakearchibald/idb-keyval). The value
+ * is persisted under `key`, read once on mount and kept in sync across tabs
+ * through a `BroadcastChannel`.
+ *
+ * React divergences:
+ * - the upstream object return `{ data, isFinished, isSupported, set }` becomes
+ *   the state-like tuple `[data, setData, controls]` (§2B), mirroring
+ *   `useStorage`: `data` is `T | null` (`null` = removed) and `setData(null)`
+ *   deletes the key through `del`;
+ * - **there is no deep watcher.** Upstream writes on *any* mutation of
+ *   `data.value` (`watchPausable(data, write, { deep: true })`), so
+ *   `data.value.count++` persists by itself. React state has no deep
+ *   observation, so writes happen **explicitly through `setData`** — that is
+ *   the React contract. Mutating an object held in `data` in place does *not*
+ *   persist; call `setData(next)` with a new value instead. The `deep` /
+ *   `shallow` / `flush` options are accepted for parity and have no effect;
+ * - `isFinished` / `isSupported` live in the third tuple slot as plain
+ *   booleans (upstream: `ShallowRef` / `ComputedRef`), and `isSupported` is
+ *   computed synchronously (`typeof window !== 'undefined' && 'BroadcastChannel'
+ *   in window`) instead of going through `useSupported`, so a `BroadcastChannel`
+ *   is available on the first mount effect;
+ * - `initialValue` is the hook's **read-only value source** and takes a plain
+ *   `T` (upstream: `MaybeRefOrGetter<T>`); it is resolved once at mount, as
+ *   upstream's `toValue(initialValue)` is — the hook owns writes, so later
+ *   prop changes are ignored;
+ * - a `delete` message from another tab resets `data` to the initial value
+ *   (upstream parity) but does not re-write the store: incoming syncs never
+ *   write back, mirroring upstream's paused watcher;
+ * - the async read and the channel listener never set state after unmount.
+ *
+ * @__NO_SIDE_EFFECTS__
+ * @example
+ * const [data, setData, { isFinished, isSupported }] = useIDBKeyval('my-store', { count: 0 })
+ *
+ * // explicit write (no deep watcher)
+ * setData({ count: 1 })
+ *
+ * // remove the key
+ * await setData(null)
+ *
+ * @see https://vueuse.org/integrations/useIDBKeyval/
+ */
+export declare function useIDBKeyval<T>(key: IDBValidKey, initialValue: T, options?: UseIDBOptions<T>): UseIDBKeyvalReturn<T>;
+//#endregion

package/dist/useIDBKeyval.iife.js

@@ -0,0 +1,175 @@
+(function(exports, idb_keyval, react) {
+	Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+	//#region useIDBKeyval/index.tsx
+	function defaultOnError(error) {
+		console.error(error);
+	}
+	function defaultSerializer() {
+		return {
+			read: (raw) => raw,
+			write: (value) => value
+		};
+	}
+	/**
+	* Reactive [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API)
+	* store — React port of VueUse's `useIDBKeyval`.
+	*
+	* Map from @vueuse/integrations `useIDBKeyval`
+	* (`source/vueuse/packages/integrations/useIDBKeyval/`), a reactive wrapper
+	* around [`idb-keyval`](https://github.com/jakearchibald/idb-keyval). The value
+	* is persisted under `key`, read once on mount and kept in sync across tabs
+	* through a `BroadcastChannel`.
+	*
+	* React divergences:
+	* - the upstream object return `{ data, isFinished, isSupported, set }` becomes
+	*   the state-like tuple `[data, setData, controls]` (§2B), mirroring
+	*   `useStorage`: `data` is `T | null` (`null` = removed) and `setData(null)`
+	*   deletes the key through `del`;
+	* - **there is no deep watcher.** Upstream writes on *any* mutation of
+	*   `data.value` (`watchPausable(data, write, { deep: true })`), so
+	*   `data.value.count++` persists by itself. React state has no deep
+	*   observation, so writes happen **explicitly through `setData`** — that is
+	*   the React contract. Mutating an object held in `data` in place does *not*
+	*   persist; call `setData(next)` with a new value instead. The `deep` /
+	*   `shallow` / `flush` options are accepted for parity and have no effect;
+	* - `isFinished` / `isSupported` live in the third tuple slot as plain
+	*   booleans (upstream: `ShallowRef` / `ComputedRef`), and `isSupported` is
+	*   computed synchronously (`typeof window !== 'undefined' && 'BroadcastChannel'
+	*   in window`) instead of going through `useSupported`, so a `BroadcastChannel`
+	*   is available on the first mount effect;
+	* - `initialValue` is the hook's **read-only value source** and takes a plain
+	*   `T` (upstream: `MaybeRefOrGetter<T>`); it is resolved once at mount, as
+	*   upstream's `toValue(initialValue)` is — the hook owns writes, so later
+	*   prop changes are ignored;
+	* - a `delete` message from another tab resets `data` to the initial value
+	*   (upstream parity) but does not re-write the store: incoming syncs never
+	*   write back, mirroring upstream's paused watcher;
+	* - the async read and the channel listener never set state after unmount.
+	*
+	* @__NO_SIDE_EFFECTS__
+	* @example
+	* const [data, setData, { isFinished, isSupported }] = useIDBKeyval('my-store', { count: 0 })
+	*
+	* // explicit write (no deep watcher)
+	* setData({ count: 1 })
+	*
+	* // remove the key
+	* await setData(null)
+	*
+	* @see https://vueuse.org/integrations/useIDBKeyval/
+	*/
+	function useIDBKeyval(key, initialValue, options = {}) {
+		var _rawInitRef$current, _optionsRef$current$w;
+		const optionsRef = (0, react.useRef)(options);
+		const rawInitRef = (0, react.useRef)(void 0);
+		(_rawInitRef$current = rawInitRef.current) !== null && _rawInitRef$current !== void 0 || (rawInitRef.current = { value: initialValue });
+		const [data, setDataState] = (0, react.useState)(() => initialValue !== null && initialValue !== void 0 ? initialValue : null);
+		const [isFinished, setIsFinished] = (0, react.useState)(false);
+		const dataRef = (0, react.useRef)(data);
+		const channelRef = (0, react.useRef)(void 0);
+		const mountedRef = (0, react.useRef)(true);
+		const targetWindow = (_optionsRef$current$w = optionsRef.current.window) !== null && _optionsRef$current$w !== void 0 ? _optionsRef$current$w : typeof window !== "undefined" ? window : void 0;
+		const isSupported = !!targetWindow && "BroadcastChannel" in targetWindow;
+		const keyRef = (0, react.useRef)(key);
+		keyRef.current = key;
+		const getSerializer = (0, react.useCallback)(() => {
+			var _optionsRef$current$s;
+			return (_optionsRef$current$s = optionsRef.current.serializer) !== null && _optionsRef$current$s !== void 0 ? _optionsRef$current$s : defaultSerializer();
+		}, []);
+		const read = (0, react.useCallback)(async () => {
+			const { onError = defaultOnError, writeDefaults = true } = optionsRef.current;
+			const rawInit = rawInitRef.current.value;
+			const currentKey = key;
+			try {
+				const rawValue = await (0, idb_keyval.get)(currentKey);
+				if (!mountedRef.current || keyRef.current !== currentKey) return;
+				if (rawValue === void 0) {
+					if (rawInit !== void 0 && rawInit !== null && writeDefaults) await (0, idb_keyval.set)(currentKey, getSerializer().write(rawInit));
+				} else {
+					const value = getSerializer().read(rawValue);
+					dataRef.current = value;
+					setDataState(value);
+				}
+			} catch (error) {
+				if (mountedRef.current) onError(error);
+			}
+			if (mountedRef.current) setIsFinished(true);
+		}, [key, getSerializer]);
+		const write = (0, react.useCallback)(async (value) => {
+			const { onError = defaultOnError } = optionsRef.current;
+			try {
+				if (value == null) {
+					var _channelRef$current;
+					await (0, idb_keyval.del)(key);
+					(_channelRef$current = channelRef.current) === null || _channelRef$current === void 0 || _channelRef$current.postMessage({ type: "delete" });
+				} else {
+					var _channelRef$current2;
+					const serializedValue = getSerializer().write(value);
+					await (0, idb_keyval.update)(key, () => serializedValue);
+					(_channelRef$current2 = channelRef.current) === null || _channelRef$current2 === void 0 || _channelRef$current2.postMessage({
+						type: "set",
+						value: serializedValue
+					});
+				}
+			} catch (error) {
+				onError(error);
+			}
+		}, [key, getSerializer]);
+		const setData = (0, react.useCallback)(async (value) => {
+			dataRef.current = value;
+			if (mountedRef.current) setDataState(value);
+			await write(value);
+		}, [write]);
+		(0, react.useEffect)(() => {
+			mountedRef.current = true;
+			read();
+			return () => {
+				mountedRef.current = false;
+			};
+		}, [read]);
+		(0, react.useEffect)(() => {
+			const { onError = defaultOnError, listenToStorageChanges = true } = optionsRef.current;
+			if (!listenToStorageChanges || !isSupported) return;
+			const channel = new BroadcastChannel(`vueuse-idb-${JSON.stringify(key)}`);
+			channelRef.current = channel;
+			const onMessageEvent = (event) => {
+				var _event$data;
+				const { type, value } = (_event$data = event.data) !== null && _event$data !== void 0 ? _event$data : {};
+				try {
+					if (type === "delete") {
+						var _value;
+						const rawInit = (_value = rawInitRef.current.value) !== null && _value !== void 0 ? _value : null;
+						dataRef.current = rawInit;
+						setDataState(rawInit);
+					} else if (type === "set") {
+						const next = getSerializer().read(value);
+						dataRef.current = next;
+						setDataState(next);
+					}
+				} catch (error) {
+					onError(error);
+				}
+			};
+			channel.addEventListener("message", onMessageEvent, { passive: true });
+			return () => {
+				channel.removeEventListener("message", onMessageEvent);
+				if (channelRef.current === channel) channelRef.current = void 0;
+				channel.close();
+			};
+		}, [
+			key,
+			isSupported,
+			getSerializer
+		]);
+		return [
+			data,
+			setData,
+			{
+				isFinished,
+				isSupported
+			}
+		];
+	}
+	//#endregion
+	exports.useIDBKeyval = useIDBKeyval;
+})(this.reause = this.reause || {}, idbKeyval, React);

package/dist/useIDBKeyval.iife.min.js

@@ -0,0 +1 @@
+(function(e,t,n){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function r(e){console.error(e)}function i(){return{read:e=>e,write:e=>e}}function a(e,a,o={}){var s;let c=(0,n.useRef)(o),l=(0,n.useRef)(void 0);l.current!=null||(l.current={value:a});let[u,d]=(0,n.useState)(()=>a==null?null:a),[f,p]=(0,n.useState)(!1),m=(0,n.useRef)(u),h=(0,n.useRef)(void 0),g=(0,n.useRef)(!0),_=(s=c.current.window)==null?typeof window<`u`?window:void 0:s,v=!!_&&`BroadcastChannel`in _,y=(0,n.useRef)(e);y.current=e;let b=(0,n.useCallback)(()=>{var e;return(e=c.current.serializer)==null?i():e},[]),x=(0,n.useCallback)(async()=>{let{onError:n=r,writeDefaults:i=!0}=c.current,a=l.current.value,o=e;try{let e=await(0,t.get)(o);if(!g.current||y.current!==o)return;if(e===void 0)a!=null&&i&&await(0,t.set)(o,b().write(a));else{let t=b().read(e);m.current=t,d(t)}}catch(e){g.current&&n(e)}g.current&&p(!0)},[e,b]),S=(0,n.useCallback)(async n=>{let{onError:i=r}=c.current;try{if(n==null){var a;await(0,t.del)(e),(a=h.current)==null||a.postMessage({type:`delete`})}else{var o;let r=b().write(n);await(0,t.update)(e,()=>r),(o=h.current)==null||o.postMessage({type:`set`,value:r})}}catch(e){i(e)}},[e,b]),C=(0,n.useCallback)(async e=>{m.current=e,g.current&&d(e),await S(e)},[S]);return(0,n.useEffect)(()=>(g.current=!0,x(),()=>{g.current=!1}),[x]),(0,n.useEffect)(()=>{let{onError:t=r,listenToStorageChanges:n=!0}=c.current;if(!n||!v)return;let i=new BroadcastChannel(`vueuse-idb-${JSON.stringify(e)}`);h.current=i;let a=e=>{var n;let{type:r,value:i}=(n=e.data)==null?{}:n;try{if(r===`delete`){var a;let e=(a=l.current.value)==null?null:a;m.current=e,d(e)}else if(r===`set`){let e=b().read(i);m.current=e,d(e)}}catch(e){t(e)}};return i.addEventListener(`message`,a,{passive:!0}),()=>{i.removeEventListener(`message`,a),h.current===i&&(h.current=void 0),i.close()}},[e,v,b]),[u,C,{isFinished:f,isSupported:v}]}e.useIDBKeyval=a})(this.reause=this.reause||{},idbKeyval,React);

package/dist/useIDBKeyval.js

@@ -0,0 +1,174 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { del, get, set, update } from "idb-keyval";
+//#region useIDBKeyval/index.tsx
+function defaultOnError(error) {
+	console.error(error);
+}
+function defaultSerializer() {
+	return {
+		read: (raw) => raw,
+		write: (value) => value
+	};
+}
+/**
+* Reactive [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API)
+* store — React port of VueUse's `useIDBKeyval`.
+*
+* Map from @vueuse/integrations `useIDBKeyval`
+* (`source/vueuse/packages/integrations/useIDBKeyval/`), a reactive wrapper
+* around [`idb-keyval`](https://github.com/jakearchibald/idb-keyval). The value
+* is persisted under `key`, read once on mount and kept in sync across tabs
+* through a `BroadcastChannel`.
+*
+* React divergences:
+* - the upstream object return `{ data, isFinished, isSupported, set }` becomes
+*   the state-like tuple `[data, setData, controls]` (§2B), mirroring
+*   `useStorage`: `data` is `T | null` (`null` = removed) and `setData(null)`
+*   deletes the key through `del`;
+* - **there is no deep watcher.** Upstream writes on *any* mutation of
+*   `data.value` (`watchPausable(data, write, { deep: true })`), so
+*   `data.value.count++` persists by itself. React state has no deep
+*   observation, so writes happen **explicitly through `setData`** — that is
+*   the React contract. Mutating an object held in `data` in place does *not*
+*   persist; call `setData(next)` with a new value instead. The `deep` /
+*   `shallow` / `flush` options are accepted for parity and have no effect;
+* - `isFinished` / `isSupported` live in the third tuple slot as plain
+*   booleans (upstream: `ShallowRef` / `ComputedRef`), and `isSupported` is
+*   computed synchronously (`typeof window !== 'undefined' && 'BroadcastChannel'
+*   in window`) instead of going through `useSupported`, so a `BroadcastChannel`
+*   is available on the first mount effect;
+* - `initialValue` is the hook's **read-only value source** and takes a plain
+*   `T` (upstream: `MaybeRefOrGetter<T>`); it is resolved once at mount, as
+*   upstream's `toValue(initialValue)` is — the hook owns writes, so later
+*   prop changes are ignored;
+* - a `delete` message from another tab resets `data` to the initial value
+*   (upstream parity) but does not re-write the store: incoming syncs never
+*   write back, mirroring upstream's paused watcher;
+* - the async read and the channel listener never set state after unmount.
+*
+* @__NO_SIDE_EFFECTS__
+* @example
+* const [data, setData, { isFinished, isSupported }] = useIDBKeyval('my-store', { count: 0 })
+*
+* // explicit write (no deep watcher)
+* setData({ count: 1 })
+*
+* // remove the key
+* await setData(null)
+*
+* @see https://vueuse.org/integrations/useIDBKeyval/
+*/
+function useIDBKeyval(key, initialValue, options = {}) {
+	var _rawInitRef$current, _optionsRef$current$w;
+	const optionsRef = useRef(options);
+	const rawInitRef = useRef(void 0);
+	(_rawInitRef$current = rawInitRef.current) !== null && _rawInitRef$current !== void 0 || (rawInitRef.current = { value: initialValue });
+	const [data, setDataState] = useState(() => initialValue !== null && initialValue !== void 0 ? initialValue : null);
+	const [isFinished, setIsFinished] = useState(false);
+	const dataRef = useRef(data);
+	const channelRef = useRef(void 0);
+	const mountedRef = useRef(true);
+	const targetWindow = (_optionsRef$current$w = optionsRef.current.window) !== null && _optionsRef$current$w !== void 0 ? _optionsRef$current$w : typeof window !== "undefined" ? window : void 0;
+	const isSupported = !!targetWindow && "BroadcastChannel" in targetWindow;
+	const keyRef = useRef(key);
+	keyRef.current = key;
+	const getSerializer = useCallback(() => {
+		var _optionsRef$current$s;
+		return (_optionsRef$current$s = optionsRef.current.serializer) !== null && _optionsRef$current$s !== void 0 ? _optionsRef$current$s : defaultSerializer();
+	}, []);
+	const read = useCallback(async () => {
+		const { onError = defaultOnError, writeDefaults = true } = optionsRef.current;
+		const rawInit = rawInitRef.current.value;
+		const currentKey = key;
+		try {
+			const rawValue = await get(currentKey);
+			if (!mountedRef.current || keyRef.current !== currentKey) return;
+			if (rawValue === void 0) {
+				if (rawInit !== void 0 && rawInit !== null && writeDefaults) await set(currentKey, getSerializer().write(rawInit));
+			} else {
+				const value = getSerializer().read(rawValue);
+				dataRef.current = value;
+				setDataState(value);
+			}
+		} catch (error) {
+			if (mountedRef.current) onError(error);
+		}
+		if (mountedRef.current) setIsFinished(true);
+	}, [key, getSerializer]);
+	const write = useCallback(async (value) => {
+		const { onError = defaultOnError } = optionsRef.current;
+		try {
+			if (value == null) {
+				var _channelRef$current;
+				await del(key);
+				(_channelRef$current = channelRef.current) === null || _channelRef$current === void 0 || _channelRef$current.postMessage({ type: "delete" });
+			} else {
+				var _channelRef$current2;
+				const serializedValue = getSerializer().write(value);
+				await update(key, () => serializedValue);
+				(_channelRef$current2 = channelRef.current) === null || _channelRef$current2 === void 0 || _channelRef$current2.postMessage({
+					type: "set",
+					value: serializedValue
+				});
+			}
+		} catch (error) {
+			onError(error);
+		}
+	}, [key, getSerializer]);
+	const setData = useCallback(async (value) => {
+		dataRef.current = value;
+		if (mountedRef.current) setDataState(value);
+		await write(value);
+	}, [write]);
+	useEffect(() => {
+		mountedRef.current = true;
+		read();
+		return () => {
+			mountedRef.current = false;
+		};
+	}, [read]);
+	useEffect(() => {
+		const { onError = defaultOnError, listenToStorageChanges = true } = optionsRef.current;
+		if (!listenToStorageChanges || !isSupported) return;
+		const channel = new BroadcastChannel(`vueuse-idb-${JSON.stringify(key)}`);
+		channelRef.current = channel;
+		const onMessageEvent = (event) => {
+			var _event$data;
+			const { type, value } = (_event$data = event.data) !== null && _event$data !== void 0 ? _event$data : {};
+			try {
+				if (type === "delete") {
+					var _value;
+					const rawInit = (_value = rawInitRef.current.value) !== null && _value !== void 0 ? _value : null;
+					dataRef.current = rawInit;
+					setDataState(rawInit);
+				} else if (type === "set") {
+					const next = getSerializer().read(value);
+					dataRef.current = next;
+					setDataState(next);
+				}
+			} catch (error) {
+				onError(error);
+			}
+		};
+		channel.addEventListener("message", onMessageEvent, { passive: true });
+		return () => {
+			channel.removeEventListener("message", onMessageEvent);
+			if (channelRef.current === channel) channelRef.current = void 0;
+			channel.close();
+		};
+	}, [
+		key,
+		isSupported,
+		getSerializer
+	]);
+	return [
+		data,
+		setData,
+		{
+			isFinished,
+			isSupported
+		}
+	];
+}
+//#endregion
+export { useIDBKeyval };

package/dist/useJwt.d.ts

@@ -0,0 +1,52 @@
+import { JwtHeader, JwtPayload } from "jwt-decode";
+//#region useJwt/index.d.ts
+export interface UseJwtOptions<Fallback> {
+  /**
+   * Value returned when encounter error on decoding
+   *
+   * @default null
+   */
+  fallbackValue?: Fallback;
+  /**
+   * Error callback for decoding
+   */
+  onError?: (error: unknown) => void;
+}
+/**
+ * React return type: a plain object with two distinct-typed named fields —
+ * the value analog of the upstream `ComputedRef`s. `header` and `payload` are
+ * decoded values (or `Fallback`), NOT refs.
+ */
+export interface UseJwtReturn<Payload, Header, Fallback> {
+  header: Header | Fallback;
+  payload: Payload | Fallback;
+}
+/**
+ * React port of VueUse's `useJwt`.
+ *
+ * Map from @vueuse/integrations `useJwt`
+ * (`source/vueuse/packages/integrations/useJwt/`), a wrapper for
+ * [`jwt-decode`](https://github.com/auth0/jwt-decode). `encodedJwt` is the
+ * hook's **read-only value source** and takes a plain string (upstream:
+ * `MaybeRefOrGetter<string>`); the decode is memoized on the token, so a
+ * stable token keeps `header`/`payload` referentially stable across renders.
+ *
+ * Adjustment for React:
+ * - upstream returns `{ header, payload }` as `ComputedRef`s; here the two
+ *   fields are plain decoded values (the issue's own `const { header, payload }
+ *   = useJwt(encodedJwt)` shape), so read them directly instead of `.value`;
+ * - `fallbackValue` defaults to `null`, and `onError` is kept in a ref so an
+ *   inline arrow callback does not churn the memo dependencies;
+ * - decoding happens during render, so under React StrictMode's dev
+ *   double-render a bad token may invoke `onError` twice. This is unavoidable
+ *   while decoding during render; guard the callback if it must fire once.
+ *
+ * @__NO_SIDE_EFFECTS__
+ * @see https://vueuse.org/useJwt
+ * @example
+ * const { header, payload } = useJwt(encodedJwt)
+ * header.alg // 'HS256'
+ * payload.sub // '1234567890'
+ */
+export declare function useJwt<Payload extends object = JwtPayload, Header extends object = JwtHeader, Fallback = null>(encodedJwt: string, options?: UseJwtOptions<Fallback>): UseJwtReturn<Payload, Header, Fallback>;
+//#endregion

package/dist/useJwt.iife.js

@@ -0,0 +1,54 @@
+(function(exports, jwt_decode, react) {
+	Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+	//#region useJwt/index.tsx
+	/**
+	* React port of VueUse's `useJwt`.
+	*
+	* Map from @vueuse/integrations `useJwt`
+	* (`source/vueuse/packages/integrations/useJwt/`), a wrapper for
+	* [`jwt-decode`](https://github.com/auth0/jwt-decode). `encodedJwt` is the
+	* hook's **read-only value source** and takes a plain string (upstream:
+	* `MaybeRefOrGetter<string>`); the decode is memoized on the token, so a
+	* stable token keeps `header`/`payload` referentially stable across renders.
+	*
+	* Adjustment for React:
+	* - upstream returns `{ header, payload }` as `ComputedRef`s; here the two
+	*   fields are plain decoded values (the issue's own `const { header, payload }
+	*   = useJwt(encodedJwt)` shape), so read them directly instead of `.value`;
+	* - `fallbackValue` defaults to `null`, and `onError` is kept in a ref so an
+	*   inline arrow callback does not churn the memo dependencies;
+	* - decoding happens during render, so under React StrictMode's dev
+	*   double-render a bad token may invoke `onError` twice. This is unavoidable
+	*   while decoding during render; guard the callback if it must fire once.
+	*
+	* @__NO_SIDE_EFFECTS__
+	* @see https://vueuse.org/useJwt
+	* @example
+	* const { header, payload } = useJwt(encodedJwt)
+	* header.alg // 'HS256'
+	* payload.sub // '1234567890'
+	*/
+	function useJwt(encodedJwt, options = {}) {
+		const { onError, fallbackValue = null } = options;
+		const onErrorRef = (0, react.useRef)(onError);
+		onErrorRef.current = onError;
+		const fallbackValueRef = (0, react.useRef)(fallbackValue);
+		fallbackValueRef.current = fallbackValue;
+		const token = encodedJwt;
+		const decodeWithFallback = (value, jwtOptions) => {
+			try {
+				return (0, jwt_decode.jwtDecode)(value, jwtOptions);
+			} catch (err) {
+				var _onErrorRef$current;
+				(_onErrorRef$current = onErrorRef.current) === null || _onErrorRef$current === void 0 || _onErrorRef$current.call(onErrorRef, err);
+				return fallbackValueRef.current;
+			}
+		};
+		return {
+			header: (0, react.useMemo)(() => decodeWithFallback(token, { header: true }), [token]),
+			payload: (0, react.useMemo)(() => decodeWithFallback(token), [token])
+		};
+	}
+	//#endregion
+	exports.useJwt = useJwt;
+})(this.reause = this.reause || {}, jwt_decode, React);

package/dist/useJwt.iife.min.js

@@ -0,0 +1 @@
+(function(e,t,n){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function r(e,r={}){let{onError:i,fallbackValue:a=null}=r,o=(0,n.useRef)(i);o.current=i;let s=(0,n.useRef)(a);s.current=a;let c=e,l=(e,n)=>{try{return(0,t.jwtDecode)(e,n)}catch(e){var r;return(r=o.current)==null||r.call(o,e),s.current}};return{header:(0,n.useMemo)(()=>l(c,{header:!0}),[c]),payload:(0,n.useMemo)(()=>l(c),[c])}}e.useJwt=r})(this.reause=this.reause||{},jwt_decode,React);

package/dist/useJwt.js

@@ -0,0 +1,53 @@
+import { useMemo, useRef } from "react";
+import { jwtDecode } from "jwt-decode";
+//#region useJwt/index.tsx
+/**
+* React port of VueUse's `useJwt`.
+*
+* Map from @vueuse/integrations `useJwt`
+* (`source/vueuse/packages/integrations/useJwt/`), a wrapper for
+* [`jwt-decode`](https://github.com/auth0/jwt-decode). `encodedJwt` is the
+* hook's **read-only value source** and takes a plain string (upstream:
+* `MaybeRefOrGetter<string>`); the decode is memoized on the token, so a
+* stable token keeps `header`/`payload` referentially stable across renders.
+*
+* Adjustment for React:
+* - upstream returns `{ header, payload }` as `ComputedRef`s; here the two
+*   fields are plain decoded values (the issue's own `const { header, payload }
+*   = useJwt(encodedJwt)` shape), so read them directly instead of `.value`;
+* - `fallbackValue` defaults to `null`, and `onError` is kept in a ref so an
+*   inline arrow callback does not churn the memo dependencies;
+* - decoding happens during render, so under React StrictMode's dev
+*   double-render a bad token may invoke `onError` twice. This is unavoidable
+*   while decoding during render; guard the callback if it must fire once.
+*
+* @__NO_SIDE_EFFECTS__
+* @see https://vueuse.org/useJwt
+* @example
+* const { header, payload } = useJwt(encodedJwt)
+* header.alg // 'HS256'
+* payload.sub // '1234567890'
+*/
+function useJwt(encodedJwt, options = {}) {
+	const { onError, fallbackValue = null } = options;
+	const onErrorRef = useRef(onError);
+	onErrorRef.current = onError;
+	const fallbackValueRef = useRef(fallbackValue);
+	fallbackValueRef.current = fallbackValue;
+	const token = encodedJwt;
+	const decodeWithFallback = (value, jwtOptions) => {
+		try {
+			return jwtDecode(value, jwtOptions);
+		} catch (err) {
+			var _onErrorRef$current;
+			(_onErrorRef$current = onErrorRef.current) === null || _onErrorRef$current === void 0 || _onErrorRef$current.call(onErrorRef, err);
+			return fallbackValueRef.current;
+		}
+	};
+	return {
+		header: useMemo(() => decodeWithFallback(token, { header: true }), [token]),
+		payload: useMemo(() => decodeWithFallback(token), [token])
+	};
+}
+//#endregion
+export { useJwt };