Merge pull request #279 from acelaya-forks/feature/remove-uuid

Drop dependency on uuid

CHANGELOG.md

@@ -4,6 +4,23 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
+## [0.5.3] - 2024-10-02
+### Added
+* *Nothing*
+
+### Changed
+* Drop dependency on `uuid`.
+
+### Deprecated
+* The `useDomId` hook is now deprecated. Use `useId` instead.
+
+### Removed
+* *Nothing*
+
+### Fixed
+* *Nothing*
+
+
 ## [0.5.2] - 2024-07-22
 ### Added
 * *Nothing*

package.json

@@ -31,8 +31,7 @@
     "dev": "vite serve --host=0.0.0.0 --port 3001"
   },
   "dependencies": {
-    "clsx": "^2.1.1",
-    "uuid": "^10.0.0"
+    "clsx": "^2.1.1"
   },
   "peerDependencies": {
     "@fortawesome/fontawesome-free": "^6.4.2",

src/form/BooleanControl.tsx

@@ -1,6 +1,6 @@
 import { clsx } from 'clsx';
 import type { ChangeEvent, FC, PropsWithChildren } from 'react';
-import { useDomId } from '../hooks';
+import { useId } from 'react';
 
 export type BooleanControlProps = PropsWithChildren<{
   checked?: boolean;
@@ -16,7 +16,7 @@ type BooleanControlWithTypeProps = BooleanControlProps & {
 export const BooleanControl: FC<BooleanControlWithTypeProps> = (
   { checked = false, onChange, className, children, type, inline = false },
 ) => {
-  const id = useDomId();
+  const id = useId();
   const onChecked = (e: ChangeEvent<HTMLInputElement>) => onChange?.(e.target.checked, e);
   const typeClasses = {
     'form-switch': type === 'switch',

src/form/InputFormGroup.tsx

@@ -1,6 +1,6 @@
 import type { FC, PropsWithChildren } from 'react';
+import { useId } from 'react';
 import type { InputType } from 'reactstrap/types/lib/Input';
-import { useDomId } from '../hooks';
 import { LabeledFormGroup } from './LabeledFormGroup';
 
 export type InputFormGroupProps = PropsWithChildren<{
@@ -16,7 +16,7 @@ export type InputFormGroupProps = PropsWithChildren<{
 export const InputFormGroup: FC<InputFormGroupProps> = (
   { children, value, onChange, type, required, placeholder, className, labelClassName },
 ) => {
-  const id = useDomId();
+  const id = useId();
 
   return (
     <LabeledFormGroup label={<>{children}:</>} className={className} labelClassName={labelClassName} id={id}>

src/hooks/index.ts

@@ -1,6 +1,5 @@
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useId, useMemo, useRef, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import { v4 as uuid } from 'uuid';
 import { parseQueryString } from '../utils';
 
 type ToggleResult = [boolean, () => void, () => void, () => void];
@@ -40,9 +39,9 @@ export const useTimeoutToggle = (
   return [flag, callback];
 };
 
+/** @deprecated Use standard useId() instead */
 export const useDomId = (): string => {
-  const { current: id } = useRef(`dom-${uuid()}`);
-  return id;
+  return useId();
 };
 
 export const useElementRef = <T>() => useRef<T | null>(null);