feat: add support for React 17, 18, and 19

BREAKING CHANGE: Drop support for React 16

- Replace UISref.defaultProps with default parameters (React 19 compat)
- Update deprecated types: StatelessComponent -> FunctionComponent
- Remove ValidationMap cast, ClassicComponentClass usage
- Import act from 'react' instead of 'react-dom/test-utils'
- Update @testing-library/react to v16 (supports React 18/19)

Author: christopherthielen

package.json

@@ -49,23 +49,24 @@
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {
-    "react": ">=16.8.0"
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^12.0.0",
+    "@testing-library/react": "^16",
     "@types/prop-types": "^15.7.15",
-    "@types/react": "17.0.14",
-    "@types/react-dom": "17.0.9",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
     "@uirouter/publish-scripts": "^2.7.0",
     "@vitest/ui": "^4.0.16",
     "cross-env": "^10.1.0",
     "husky": "^9.1.7",
     "jsdom": "^27.4.0",
     "prettier": "^3.7.4",
     "pretty-quick": "^4.2.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^19",
+    "react-dom": "^19",
     "ts-loader": "^9.5.4",
     "tsconfig-paths-webpack-plugin": "^4.2.0",
     "typescript": "^5.9.3",

src/__tests__/util.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
+import { act } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { TransitionOptions, RawParams, StateOrName, TransitionPromise, memoryLocationPlugin } from '@uirouter/core';
 import { render } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
 import { UIRouterReact } from '../core';
 import { servicesPlugin, UIRouter } from '../index';
 import { ReactStateDeclaration } from '../interface';

src/components/UIRouter.tsx

@@ -132,7 +132,7 @@ export const InstanceOrPluginsMissingError = `Router instance or plugins missing
  * ```
  */
 export function UIRouter(props: UIRouterProps) {
-  const uiRouter = useRef<UIRouterReact>();
+  const uiRouter = useRef<UIRouterReact>(undefined);
   const [started, setStarted] = useState<boolean>(false);
 
   useEffect(() => {

src/components/UISref.tsx

@@ -50,7 +50,7 @@ export interface UISrefProps {
  * - the underlying tag (e.g.: anchor tag) has a 'target' attribute, such as `<a target="_blank">Open in new window</a>`
  * - preventDefault has been called on the event, e.g.: `<a onClick={e => e.preventDefault()}>no-op</a>`
  */
-export const UISref: React.FC<UISrefProps> = ({ children, className, options, params, to }) => {
+export const UISref: React.FC<UISrefProps> = ({ children, className = null, options = {}, params = {}, to }) => {
   const { onClick, href } = useSref(to, params, options);
   const childrenProps = children.props;
 
@@ -88,9 +88,3 @@ UISref.propTypes = {
   options: PropTypes.object,
   className: PropTypes.string,
 };
-
-UISref.defaultProps = {
-  params: {},
-  options: {},
-  className: null,
-};

src/components/UIView.tsx

@@ -2,8 +2,8 @@ import * as PropTypes from 'prop-types';
 import * as React from 'react';
 import {
   ComponentType,
+  FunctionComponent,
   ReactNode,
-  ValidationMap,
   cloneElement,
   createContext,
   createElement,
@@ -15,6 +15,7 @@ import {
   forwardRef,
   useImperativeHandle,
   useRef,
+  JSX,
 } from 'react';
 import {
   ActiveUIView,
@@ -129,7 +130,7 @@ function useRoutedComponentProps(
   router: UIRouter,
   stateName: string,
   viewConfig: ViewConfig,
-  component: React.FunctionComponent<any> | React.ComponentClass<any> | React.ClassicComponentClass<any>,
+  component: FunctionComponent<any> | React.ComponentClass<any>,
   resolves: TypedMap<any> | {},
   className: string,
   style: Object,
@@ -190,7 +191,7 @@ function useReactHybridApi(ref: React.Ref<unknown>, uiViewData: ActiveUIView, ui
  */
 function useUiCanExitClassComponentHook(router: UIRouter, stateName: string, maybeComponentClass: any) {
   // Use refs and run the callback outside of any render pass
-  const componentInstanceRef = useRef<any>();
+  const componentInstanceRef = useRef<any>(undefined);
   const deregisterRef = useRef<Function>(() => undefined);
 
   function callbackRef(componentInstance) {
@@ -278,7 +279,7 @@ View.propTypes = {
   className: PropTypes.string,
   style: PropTypes.object,
   render: PropTypes.func,
-} as ValidationMap<UIViewProps>;
+};
 
 /**
  * UIView Viewport

src/components/__tests__/UIRouter.test.tsx

@@ -8,7 +8,7 @@ import { memoryLocationPlugin } from '../../index';
 import { muteConsoleErrors } from '../../__tests__/util';
 
 class Child extends React.Component<any, any> {
-  static propTypes: React.ValidationMap<any> = {
+  static propTypes = {
     router: PropTypes.object,
   };
   render() {

src/components/__tests__/UIView.test.tsx

@@ -1,7 +1,7 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { render } from '@testing-library/react';
 import * as React from 'react';
-import { act } from 'react-dom/test-utils';
+import { act } from 'react';
 import { Transition } from '@uirouter/core';
 
 import { makeTestRouter, muteConsoleErrors } from '../../__tests__/util';
@@ -90,7 +90,7 @@ describe('<UIView>', () => {
     });
 
     describe('injects the right props:', () => {
-      let lastProps = undefined;
+      let lastProps: any = undefined;
       const Comp = (props) => {
         lastProps = props;
         return <span>component</span>;

src/hooks/__tests__/useSref.test.tsx

@@ -1,7 +1,7 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { fireEvent, render } from '@testing-library/react';
 import * as React from 'react';
-import { act } from 'react-dom/test-utils';
+import { act } from 'react';
 import { makeTestRouter, muteConsoleErrors } from '../../__tests__/util';
 import { UIRouter, UIView } from '../../components';
 import { UISrefActive, UISrefActiveContext } from '../../components/UISrefActive';

src/interface.tsx

@@ -1,4 +1,4 @@
-import { StatelessComponent, ComponentClass, ClassicComponentClass } from 'react';
+import { FunctionComponent, ComponentClass } from 'react';
 import { StateDeclaration, _ViewDeclaration, Transition } from '@uirouter/core';
 
 /**
@@ -169,7 +169,7 @@ export interface ReactViewDeclaration extends _ViewDeclaration {
    * }
    * ```
    */
-  component?: StatelessComponent<any> | ComponentClass<any> | ClassicComponentClass<any>;
+  component?: FunctionComponent<any> | ComponentClass<any>;
 
   /**
    * @hidden