refactor: switch from react-router peer dep to react-router-dom (#64)

* refactor: switch from react-router peer dep to react-router-dom

* chore: update yarn lockfile

* fix: some TS warnings in test file

* fix: types

Co-authored-by: Justin Schrader <[email protected]>

Author: icd2k3

package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-react-router-breadcrumbs",
-  "version": "3.2.1",
+  "version": "4.0.0",
   "description": "A hook for displaying and setting breadcrumbs for react router",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -11,7 +11,7 @@
   "types": "dist/index.d.ts",
   "peerDependencies": {
     "react": ">=16.8",
-    "react-router": ">=6.0.0"
+    "react-router-dom": ">=6.0.0"
   },
   "scripts": {
     "prepublishOnly": "yarn build && pinst --disable",
@@ -55,7 +55,7 @@
     "pinst": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router": "^6.3.0",
+    "react-router-dom": "^6.3.0",
     "rollup": "^2.79.0",
     "rollup-plugin-size": "^0.2.2",
     "rollup-plugin-terser": "^7.0.2",

rollup.config.js

@@ -27,7 +27,7 @@ const formats = [
 
 const globals = {
   react: 'React',
-  'react-router': 'ReactRouter',
+  'react-router-dom': 'ReactRouterDom',
 };
 
 export default formats.map(({ plugins, file, format }) => ({

src/index.test.tsx

@@ -3,8 +3,8 @@
 import '@testing-library/jest-dom';
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { MemoryRouter as Router, useLocation } from 'react-router';
-import useBreadcrumbs, { getBreadcrumbs, createRoutesFromChildren, BreadcrumbsRoute, Route, Options } from './index';
+import { MemoryRouter as Router, useLocation } from 'react-router-dom';
+import useBreadcrumbs, { getBreadcrumbs, createRoutesFromChildren, BreadcrumbsRoute, Route, Options, BreadcrumbComponentProps } from './index';
 
 // imports to test compiled builds
 import useBreadcrumbsCompiledES, {
@@ -19,6 +19,11 @@ import useBreadcrumbsCompiledCJS, {
   getBreadcrumbs as getBreadcrumbsCompiledCJS,
 } from '../dist/cjs/index';
 
+interface ExtraPropsTest extends BreadcrumbComponentProps {
+  foo?: string;
+  bar?: string;
+}
+
 const components = {
   Breadcrumbs: ({
     useBreadcrumbs: useBreadcrumbsHook,
@@ -69,23 +74,23 @@ const components = {
 
   BreadcrumbLocationTest: ({
     location,
-  }: {
-    location?: {
-      state?: { isLocationTest?: boolean }
-    }
-  }) => <span>{location?.state?.isLocationTest ? 'pass' : 'fail'}</span>,
+  }: BreadcrumbComponentProps) => (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    <span>{location?.state?.isLocationTest ? 'pass' : 'fail'}</span>
+  ),
 
-  BreadcrumbExtraPropsTest: ({ foo, bar }: { foo: string, bar: string }) => (
-    <span>
-      {foo}
-      {bar}
-    </span>
+  BreadcrumbExtraPropsTest: (props: ExtraPropsTest) => (
+    <>
+      <span>{props.foo}</span>
+      <span>{props.bar}</span>
+    </>
   ),
 
   BreadcrumbMemoized: React.memo(() => <span>Memoized</span>),
 
   // eslint-disable-next-line react/prefer-stateless-function
-  BreadcrumbClass: class BreadcrumbClass extends React.PureComponent {
+  BreadcrumbClass: class BreadcrumbClass extends React.PureComponent<BreadcrumbComponentProps> {
     render() {
       return <span>Class</span>;
     }
@@ -457,6 +462,8 @@ describe('use-react-router-breadcrumbs', () => {
         },
       ];
 
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore arbitrary prop is not expected, but should not error
       renderer({ pathname: '/one', routes });
       expect(getByTextContent('Home / foobar')).toBeTruthy();
     });

src/index.tsx

@@ -23,15 +23,23 @@ import {
   useLocation,
   RouteObject,
   Params,
-  PathPattern,
   Route,
   PathRouteProps,
   LayoutRouteProps,
   IndexRouteProps,
-} from 'react-router';
+} from 'react-router-dom';
 
 type Location = ReturnType<typeof useLocation>;
 
+/**
+ * This type interface is copied in directly from react-router (react-router-dom does not export it)
+ */
+interface PathPattern<Path extends string = string> {
+  path: Path;
+  caseSensitive?: boolean;
+  end?: boolean;
+}
+
 export interface Options {
   disableDefaults?: boolean;
   excludePaths?: string[];
@@ -61,6 +69,7 @@ export interface BreadcrumbComponentProps<ParamKey extends string = string> {
   key: string;
   match: BreadcrumbMatch<ParamKey>;
   location: Location;
+  [x: string]: unknown;
 }
 
 export type BreadcrumbComponentType<ParamKey extends string = string> =

yarn.lock

@@ -6897,7 +6897,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-router@npm:^6.3.0":
+"react-router-dom@npm:^6.3.0":
+  version: 6.3.0
+  resolution: "react-router-dom@npm:6.3.0"
+  dependencies:
+    history: ^5.2.0
+    react-router: 6.3.0
+  peerDependencies:
+    react: ">=16.8"
+    react-dom: ">=16.8"
+  checksum: 77603a654f8a8dc7f65535a2e5917a65f8d9ffcb06546d28dd297e52adcc4b8a84377e0115f48dca330b080af2da3e78f29d590c89307094d36927d2b1751ec3
+  languageName: node
+  linkType: hard
+
+"react-router@npm:6.3.0":
   version: 6.3.0
   resolution: "react-router@npm:6.3.0"
   dependencies:
@@ -8116,14 +8129,14 @@ __metadata:
     pinst: ^3.0.0
     react: ^18.2.0
     react-dom: ^18.2.0
-    react-router: ^6.3.0
+    react-router-dom: ^6.3.0
     rollup: ^2.79.0
     rollup-plugin-size: ^0.2.2
     rollup-plugin-terser: ^7.0.2
     typescript: ^4.8.3
   peerDependencies:
     react: ">=16.8"
-    react-router: ">=6.0.0"
+    react-router-dom: ">=6.0.0"
   languageName: unknown
   linkType: soft