feat: add pass through props functionality and other cleanup items (#21)

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

README.md

@@ -275,24 +275,28 @@ Now, `example.com/users/create` will display `create-breadcrumb` as expected, be
 ## API
 
 ```js
-Route = {
+BreadcrumbsRoute = {
   path: String
   breadcrumb?: React.ComponentType | React.ElementType | string | null
-  matchOptions?: { // see: https://reacttraining.com/react-router/web/api/matchPath
+  // see: https://reacttraining.com/react-router/web/api/matchPath
+  matchOptions?: {
     exact?: boolean
     strict?: boolean
     sensitive?: boolean
   }
-  routes?: BreadcrumbsRoute[]  // optional nested routes (for react-router config compatibility)
+  // optional nested routes (for react-router config compatibility)
+  routes?: BreadcrumbsRoute[],
+  // optional props to be passed through directly to the breadcrumb component
+  props?: { [x: string]: unknown };
 }
 
 Options = {
-  currentSection?: string
+  // disable all default generation of breadcrumbs
   disableDefaults?: boolean
+  // exclude certain paths fom generating breadcrumbs
   excludePaths?: string[]
-  pathSection?: string
 }
 
 // if routes are not passed, default breadcrumbs will be returned
-useBreadcrumbs(routes?: Route[], options?: Options): Array<React.node>
+useBreadcrumbs(routes?: BreadcrumbsRoute[], options?: Options): Array<React.node>
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-react-router-breadcrumbs",
-  "version": "1.0.5",
+  "version": "2.0.0",
   "description": "A hook for displaying and setting breadcrumbs for react router",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",

src/index.test.js

@@ -4,22 +4,27 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { mount } from 'enzyme';
 import { MemoryRouter as Router } from 'react-router';
-import withBreadcrumbs, { getBreadcrumbs } from './index.tsx';
+import useBreadcrumbs, { getBreadcrumbs } from './index.tsx';
 
 // imports to test compiled builds
-import withBreadcrumbsCompiledES, {
+import useBreadcrumbsCompiledES, {
   getBreadcrumbs as getBreadcrumbsCompiledES,
 } from '../dist/es/index';
-import withBreadcrumbsCompiledUMD, {
+import useBreadcrumbsCompiledUMD, {
   getBreadcrumbs as getBreadcrumbsCompiledUMD,
 } from '../dist/umd/index';
-import withBreadcrumbsCompiledCJS, {
+import useBreadcrumbsCompiledCJS, {
   getBreadcrumbs as getBreadcrumbsCompiledCJS,
 } from '../dist/cjs/index';
 
 const components = {
-  Breadcrumbs: ({ useBreadcrumbs, options, routes, ...forwardedProps }) => {
-    const breadcrumbs = useBreadcrumbs(routes, options);
+  Breadcrumbs: ({
+    useBreadcrumbs: useBreadcrumbsHook,
+    options,
+    routes,
+    ...forwardedProps
+  }) => {
+    const breadcrumbs = useBreadcrumbsHook(routes, options);
 
     return (
       <h1>
@@ -65,13 +70,13 @@ const components = {
 const getHOC = () => {
   switch (process.env.TEST_BUILD) {
     case 'cjs':
-      return withBreadcrumbsCompiledCJS;
+      return useBreadcrumbsCompiledCJS;
     case 'umd':
-      return withBreadcrumbsCompiledUMD;
+      return useBreadcrumbsCompiledUMD;
     case 'es':
-      return withBreadcrumbsCompiledES;
+      return useBreadcrumbsCompiledES;
     default:
-      return withBreadcrumbs;
+      return useBreadcrumbs;
   }
 };
 
@@ -89,12 +94,12 @@ const getMethod = () => {
 };
 
 const render = ({ options, pathname, routes, state, props }) => {
-  const useBreadcrumbs = getHOC();
+  const useBreadcrumbsHook = getHOC();
   const { Breadcrumbs } = components;
   const wrapper = mount(
     <Router initialIndex={0} initialEntries={[{ pathname, state }]}>
       <Breadcrumbs
-        useBreadcrumbs={useBreadcrumbs}
+        useBreadcrumbs={useBreadcrumbsHook}
         options={options}
         routes={routes}
         {...(props || {})}
@@ -348,8 +353,10 @@ describe('use-react-router-breadcrumbs', () => {
         {
           path: '/one',
           breadcrumb: components.BreadcrumbExtraPropsTest,
-          foo: 'Pass through',
-          bar: ' props',
+          props: {
+            foo: 'Pass through',
+            bar: ' props',
+          },
         },
       ];
       const { breadcrumbs } = render({ pathname: '/one', routes });
@@ -418,7 +425,7 @@ describe('use-react-router-breadcrumbs', () => {
           location: { pathname: '/1' },
         })
       ).toThrow(
-        'withBreadcrumbs: `path` must be provided in every route object'
+        'useBreadcrumbs: `path` must be provided in every route object'
       );
     });
   });

src/index.tsx

@@ -24,10 +24,8 @@ import { matchPath, useLocation } from 'react-router';
 type Location = ReturnType<typeof useLocation>;
 
 export interface Options {
-  currentSection?: string;
   disableDefaults?: boolean;
   excludePaths?: string[];
-  pathSection?: string;
 }
 
 export interface MatchOptions {
@@ -41,6 +39,7 @@ export interface BreadcrumbsRoute {
   breadcrumb?: React.ComponentType | React.ElementType | string | null;
   matchOptions?: MatchOptions;
   routes?: BreadcrumbsRoute[];
+  props?: { [x: string]: unknown };
 }
 
 export interface BreadcrumbData {
@@ -72,13 +71,19 @@ const render = ({
   breadcrumb: Breadcrumb,
   match,
   location,
-  ...rest
+  props,
 }: {
   breadcrumb: React.ComponentType | string;
   match: { url: string };
   location: Location;
+  props?: { [x: string]: unknown };
 }): BreadcrumbData => {
-  const componentProps = { match, location, key: match.url, ...rest };
+  const componentProps = {
+    match,
+    location,
+    key: match.url,
+    ...(props || {}),
+  };
 
   return {
     ...componentProps,
@@ -156,7 +161,7 @@ const getBreadcrumbMatch = ({
     ({ breadcrumb: userProvidedBreadcrumb, matchOptions, path, ...rest }) => {
       if (!path) {
         throw new Error(
-          'withBreadcrumbs: `path` must be provided in every route object'
+          'useBreadcrumbs: `path` must be provided in every route object'
         );
       }