useDataState

1"use client";
2 
3import * as React from "react";
4 
5type DataStateValue = string | boolean | null;
6 
7function parseDatasetValue(value: string | null): DataStateValue {
8  if (value === null) return null;
9  if (value === "" || value === "true") return true;
10  if (value === "false") return false;
11  return value;
12}
13 
14function useDataState<T extends HTMLElement = HTMLElement>(
15  key: string,
16  forwardedRef?: React.Ref<T | null>,
17  onChange?: (value: DataStateValue) => void,
18): [DataStateValue, React.RefObject<T | null>] {
19  const localRef = React.useRef<T | null>(null);
20  React.useImperativeHandle(forwardedRef, () => localRef.current as T);
21 
22  const getSnapshot = (): DataStateValue => {
23    const el = localRef.current;
24    return el ? parseDatasetValue(el.getAttribute(`data-${key}`)) : null;
25  };
26 
27  const subscribe = (callback: () => void) => {
28    const el = localRef.current;
29    if (!el) return () => {};
30    const observer = new MutationObserver((records) => {
31      for (const record of records) {
32        if (record.attributeName === `data-${key}`) {
33          callback();
34          break;
35        }
36      }
37    });
38    observer.observe(el, {
39      attributes: true,
40      attributeFilter: [`data-${key}`],
41    });
42    return () => observer.disconnect();
43  };
44 
45  const value = React.useSyncExternalStore(subscribe, getSnapshot);
46 
47  React.useEffect(() => {
48    if (onChange) onChange(value);
49  }, [value, onChange]);
50 
51  return [value, localRef];
52}
53 
54export { useDataState, type DataStateValue };