Implement useLocation when available. Add deprecation warning for v4 (#…

…98)

* refactor: start migrating to v6 hooks

* feat: add deprecation warning for react-router v4

* fix: peer dependencies

* chore: better warning message and peer dependency version

* fix: package json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-router-breadcrumbs-hoc",
-  "version": "3.2.5",
+  "version": "3.2.6",
   "description": "small, flexible, higher order component for rendering breadcrumbs with react-router 4.x",
   "repository": "icd2k3/react-router-breadcrumbs-hoc",
   "main": "dist/cjs/index.js",
@@ -27,7 +27,7 @@
   "author": "Justin Schrader ([email protected])",
   "license": "MIT",
   "peerDependencies": {
-    "react": ">=16",
+    "react": ">=16.8",
     "react-router": ">=4",
     "react-router-dom": ">=4"
   },
@@ -52,7 +52,7 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.0.1",
+    "eslint-config-airbnb": "^18.1.0",
     "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.19.0",
@@ -65,7 +65,7 @@
     "react-dom": "16.13.0",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
-    "rollup": "^2.0.3",
+    "rollup": "^2.0.6",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-uglify": "^6.0.2",
     "typescript": "^3.8.3"
@@ -78,6 +78,7 @@
     "router",
     "breadcrumbs",
     "react-router",
-    "react-router 4"
+    "react-router 4",
+    "react-router 5"
   ]
 }

rollup.config.js

@@ -29,6 +29,7 @@ const exports = [
 const globals = {
   react: 'React',
   'react-router': 'ReactRouter',
+  'react-router-dom': 'reactRouterDom',
 };
 
 export default exports.map((item) => ({

src/index.tsx

@@ -20,6 +20,7 @@
 
 import React, { createElement } from 'react';
 import { matchPath, withRouter } from 'react-router';
+import { useLocation } from 'react-router-dom';
 
 // eslint-disable-next-line import/extensions, import/no-unresolved, no-unused-vars
 import * as types from '../types/react-router-breadcrumbs-hoc/index';
@@ -243,17 +244,48 @@ const flattenRoutes = (routes: types.BreadcrumbsRoute[]) => (routes)
     return arr.concat(route);
   }, [] as types.BreadcrumbsRoute[]);
 
+/**
+ * This is the main default HOC wrapper component. There is some
+ * logic in here for legacy react-router v4 support
+ */
 export default (
   routes?: types.BreadcrumbsRoute[],
   options?: types.Options,
-) => (Component: React.ComponentType) => withRouter(
-  (props: { location: types.Location }) => createElement(Component, {
-    ...props,
-    // @ts-ignore-next-line
-    breadcrumbs: getBreadcrumbs({
-      routes: flattenRoutes(routes || []),
-      location: props.location,
-      options,
-    }),
-  }),
-);
+) => (
+  Component: React.ComponentType,
+) => {
+  const sharedBreadcrumbProps = {
+    options,
+    routes: flattenRoutes(routes || []),
+  };
+
+  // use the location hook if available (5.x)
+  /* istanbul ignore else */
+  if (useLocation) {
+    return () => createElement(Component, {
+      // @ts-ignore-next-line
+      breadcrumbs: getBreadcrumbs({
+        ...sharedBreadcrumbProps,
+        location: useLocation(),
+      }),
+    });
+  }
+
+  // fallback to withRouter for older react-router versions (4.x)
+  /* istanbul ignore next */
+  return withRouter(
+    (props: { location: types.Location }) => {
+      // eslint-disable-next-line no-console
+      console.warn('[react-router-breadcrumbs-hoc]: react-router v4 support will be deprecated in the next major release. Please consider upgrading react-router and react-router-dom to >= 5.1.0');
+
+      return createElement(Component, {
+        ...props,
+        // @ts-ignore-next-line
+        breadcrumbs: getBreadcrumbs({
+          ...sharedBreadcrumbProps,
+          location: props.location,
+        }),
+      });
+    },
+  );
+};