Add support for React 19 to iconoir-react (#500)

examples/next/.gitignore

@@ -3,8 +3,12 @@
 # dependencies
 /node_modules
 /.pnp
-.pnp.js
-.yarn/install-state.gz
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
 
 # testing
 /coverage
@@ -24,9 +28,10 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
 
-# local env files
-.env*.local
+# env files (can opt-in for committing if needed)
+.env*
 
 # vercel
 .vercel

examples/next/next.config.ts

@@ -0,0 +1,9 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  experimental: {
+    optimizePackageImports: ['iconoir-react'],
+  },
+};
+
+export default nextConfig;

examples/next/package.json

@@ -2,21 +2,21 @@
   "name": "example-next",
   "private": true,
   "scripts": {
+    "dev": "next dev --turbopack",
     "build": "next build",
-    "dev": "next dev",
-    "lint": "next lint",
-    "start": "next start"
+    "start": "next start",
+    "lint": "next lint"
   },
   "dependencies": {
-    "next": "14.2.10",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "next": "15.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@types/node": "^20.10.4",
-    "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.18",
+    "@types/node": "^22",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
     "iconoir-react": "workspace:*",
-    "typescript": "^5.3.3"
+    "typescript": "^5"
   }
 }

examples/next/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "incremental": true,
-    "target": "es5",
+    "target": "ES2017",
     "jsx": "preserve",
     "lib": ["dom", "dom.iterable", "esnext"],
     "module": "esnext",

iconoir.com/components/IconList.tsx

@@ -172,7 +172,7 @@ export function IconList({ filters, allIcons }: IconListProps) {
     : null;
 
   let children = null;
-  const listRef = React.useRef<List<IconRow[]> | null>();
+  const listRef = React.useRef<List<IconRow[]> | null>(null);
   const [height, setHeight] = React.useState(400);
 
   const iconWidth = iconsPerRow

iconoir.com/components/ReactWindowScroller.tsx

@@ -45,7 +45,6 @@ interface ChildOpts<Props extends ListProps | GridProps> {
   onScroll: Props['onScroll'];
 }
 interface ReactWindowScrollerProps<Props extends ListProps | GridProps> {
-
   children: (opts: ChildOpts<Props>) => React.ReactElement;
   throttleTime?: number;
   isGrid?: boolean;
@@ -58,8 +57,8 @@ export function ReactWindowScroller<
   throttleTime = 10,
   isGrid = false,
 }: ReactWindowScrollerProps<Props>) {
-  const ref = useRef<any>();
-  const outerRef = useRef<HTMLElement>();
+  const ref = useRef<any>(null);
+  const outerRef = useRef<HTMLElement>(null);
   const targetElement = typeof window === 'undefined' ? (undefined as any) : window;
 
   useEffect(() => {

iconoir.com/components/Slider.tsx

@@ -67,7 +67,7 @@ export interface SliderProps extends ReactSliderProps<number[]> {
 }
 
 export function Slider(props: SliderProps) {
-  const trackRef = React.useRef(null);
+  const trackRef = React.useRef<HTMLDivElement>(null);
   const numberFormatter = useNumberFormatter(props.formatOptions);
   const state = useSliderState({ ...props, numberFormatter });
 
@@ -99,7 +99,7 @@ export function Slider(props: SliderProps) {
 
 interface ThumbProps {
   state: SliderState;
-  trackRef: React.RefObject<HTMLElement>;
+  trackRef: React.RefObject<HTMLElement | null>;
   index: number;
 }
 

iconoir.com/package.json

@@ -10,34 +10,34 @@
   "devDependencies": {
     "@nodesecure/npm-registry-sdk": "3.0.0",
     "@octokit/rest": "21.0.2",
-    "@react-aria/focus": "^3.15.0",
-    "@react-aria/i18n": "^3.9.0",
-    "@react-aria/slider": "^3.7.3",
-    "@react-aria/utils": "^3.22.0",
-    "@react-aria/visually-hidden": "^3.8.7",
-    "@react-stately/slider": "^3.4.5",
-    "@react-types/slider": "^3.7.0",
+    "@react-aria/focus": "^3.19.0",
+    "@react-aria/i18n": "^3.12.4",
+    "@react-aria/slider": "^3.7.14",
+    "@react-aria/utils": "^3.26.0",
+    "@react-aria/visually-hidden": "^3.8.18",
+    "@react-stately/slider": "^3.6.0",
+    "@react-types/slider": "^3.7.7",
     "@types/animejs": "^3.1.12",
-    "@types/lodash": "^4.14.202",
+    "@types/lodash": "^4.17.13",
     "@types/node": "22.10.2",
-    "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.18",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
     "@types/react-window": "^1.8.8",
     "animejs": "^3.2.2",
     "csvtojson": "^2.0.10",
     "eslint-config-next": "15.1.0",
     "iconoir-react": "workspace:*",
     "lodash": "^4.17.21",
-    "moment": "^2.29.4",
+    "moment": "^2.30.1",
     "next": "^15.1.0",
     "next-mdx-remote": "^5.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-window": "^1.8.10",
     "remark-gfm": "4.0.0",
     "remark-prism": "^1.3.6",
-    "scule": "^1.1.1",
-    "styled-components": "^6.1.1",
+    "scule": "^1.3.0",
+    "styled-components": "^6.1.13",
     "typescript": "5.7.2",
     "use-resize-observer": "^9.1.0"
   }

packages/iconoir-react/package.json

@@ -41,9 +41,9 @@
     "dist"
   ],
   "peerDependencies": {
-    "react": "^16.8.6 || ^17 || ^18"
+    "react": "^16.8.6 || ^17 || ^18 || ^19"
   },
   "devDependencies": {
-    "@types/react": "^18.2.45"
+    "@types/react": "^19.0.1"
   }
 }