Use React.useId() instead of lodash.uniqueid (#53)

* use React.useId() instead of lodash.uniqueid * Fallback useId for React < 18
corygibbons · Jun 7, 2024 · 7a10418 · 7a10418
1 parent b1a9b19
commit 7a10418
Show file tree

Hide file tree

Showing 4 changed files with 220 additions and 221 deletions.
diff --git a/package.json b/package.json
@@ -23,7 +23,6 @@
   "license": "MIT",
   "dependencies": {
     "colord": "^2.9.3",
-    "lodash.uniqueid": "^4.0.1",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {

diff --git a/src/FileIcon.js b/src/FileIcon.js
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { colord, extend as extendColord } from 'colord';
 import namesPlugin from 'colord/plugins/names';
-import uniqueId from 'lodash.uniqueid';
 
 import glyphs from './glyphs';
 
@@ -70,6 +69,11 @@ const FOLD = {
 
 const LABEL_HEIGHT = 14;
 
+const useId = React.useId || (() => {
+  let i = 0;
+  return () => i++;
+})();
+
 export const FileIcon = ({
   color = 'whitesmoke',
   extension,
@@ -84,7 +88,8 @@ export const FileIcon = ({
   radius = 4,
   type,
 }) => {
-  const UNIQUE_ID = uniqueId();
+  const id = useId();
+  const UNIQUE_ID = typeof jest === 'undefined' ? id : '';
 
   return (
     <svg