fix: add support for react < 18 with custom useId hook. #53

Author: jaywcjlove

core/src/Container.tsx

@@ -1,7 +1,8 @@
-import React, { forwardRef, useId } from 'react';
+import React, { forwardRef } from 'react';
 import { NestedClose } from './comps/NestedClose';
 import { NestedOpen } from './comps/NestedOpen';
 import { KeyValues } from './comps/KeyValues';
+import { useIdCompat } from './comps/useIdCompat';
 import { useShowToolsDispatch } from './store/ShowTools';
 
 export interface ContainerProps<T extends object> extends React.HTMLAttributes<HTMLDivElement> {
@@ -28,7 +29,7 @@ export const Container = forwardRef(<T extends object>(props: ContainerProps<T>,
     ...elmProps
   } = props;
   const dispatch = useShowToolsDispatch();
-  const subkeyid = useId();
+  const subkeyid = useIdCompat();
   const defaultClassNames = [className, 'w-rjv-inner'].filter(Boolean).join(' ');
   const reset: React.HTMLAttributes<HTMLDivElement> = {
     onMouseEnter: () => dispatch({ [subkeyid]: true }),

core/src/comps/KeyValues.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useId, useRef } from 'react';
+import { Fragment, useRef } from 'react';
 import { useStore } from '../store';
 import { useExpandsStore } from '../store/Expands';
 import { useShowToolsDispatch } from '../store/ShowTools';
@@ -10,6 +10,7 @@ import { Quote, Colon } from '../symbol';
 import { useHighlight } from '../utils/useHighlight';
 import { type SectionElementResult } from '../store/Section';
 import { Copied } from '../comps/Copied';
+import { useIdCompat } from '../comps/useIdCompat';
 
 interface KeyValuesProps<T extends object> extends SectionElementResult<T> {
   expandKey?: string;
@@ -84,7 +85,7 @@ KayName.displayName = 'JVR.KayName';
 export const KeyValuesItem = <T extends object>(props: KeyValuesProps<T>) => {
   const { keyName, value, parentValue, level = 0, keys = [] } = props;
   const dispatch = useShowToolsDispatch();
-  const subkeyid = useId();
+  const subkeyid = useIdCompat();
   const isMyArray = Array.isArray(value);
   const isMySet = value instanceof Set;
   const isMyMap = value instanceof Map;

core/src/comps/useIdCompat.tsx

@@ -0,0 +1,9 @@
+import { useRef } from 'react';
+
+export function useIdCompat() {
+  const idRef = useRef<string | null>(null);
+  if (idRef.current === null) {
+    idRef.current = 'custom-id-' + Math.random().toString(36).substr(2, 9);
+  }
+  return idRef.current;
+}