Add option to completely disable default breadcrumb generation

README.md

@@ -130,11 +130,15 @@ const EditorBreadcrumb = ({ location: { state: { isNew } } }) => (
 
 This package will attempt to create breadcrumbs for you based on the route section via [humanize-string](https://github.com/sindresorhus/humanize-string). For example `/users` will auotmatically create the breadcrumb `"Users"`. There are two ways to disable default breadcrumbs for a path:
 
-**Option 1:** Pass `breadcrumb: null` in the routes config:
+**Option 1:** Disable _all_ default breadcrumb generation by passing `disableDefaults: true` in the `options` object
+
+`withBreadcrumbs(routes, { disableDefaults: true })`
+
+**Option 2:** Disable _individual_ default breadcrumbs by passing `breadcrumb: null` in route config:
 
 `{ path: '/a/b', breadcrumb: null }`
 
-**Option 2:** Or, Pass an `excludePaths` array in the `options` object
+**Option 3:** Disable _individual_ default breadcrumbs by passing an `excludePaths` array in the `options` object
 
 `withBreadcrumbs(routes, { excludePaths: ['/', '/no-breadcrumb/for-this-route'] })`
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-router-breadcrumbs-hoc",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Just a tiny, flexible, higher order component for rendering breadcrumbs with react-router 4.x",
   "repository": "icd2k3/react-router-breadcrumbs-hoc",
   "keywords": [

src/index.js

@@ -30,6 +30,7 @@ const getDefaultBreadcrumb = ({ pathSection, currentSection, location }) => {
 // a user-provided breadcrumb OR a sensible default via `humanize-string`
 const getBreadcrumb = ({
   currentSection,
+  disableDefaults,
   excludePaths,
   location,
   pathSection,
@@ -60,6 +61,14 @@ const getBreadcrumb = ({
     }
 
     if (match) {
+      // this covers the case where a user may be extending their react-router route
+      // config with breadcrumbs, but also does not want default breadcrumbs to be
+      // automatically generated (opt-in)
+      if (!userProvidedBreadcrumb && disableDefaults) {
+        breadcrumb = NO_BREADCRUMB;
+        return true;
+      }
+
       breadcrumb = render({
         // although we have a match, the user may be passing their react-router config object
         // which we support. The route config object may not have a `breadcrumb` param specified.
@@ -73,14 +82,21 @@ const getBreadcrumb = ({
     return false;
   });
 
-  // if there are no breadcrumbs provided in the routes array we return a default breadcrumb instead
-  return breadcrumb
-    || getDefaultBreadcrumb({
-      pathSection,
-      // include a "Home" breadcrumb by default (can be overrode or disabled in config)
-      currentSection: pathSection === '/' ? 'Home' : currentSection,
-      location,
-    });
+  if (breadcrumb) {
+    // user provided a breadcrumb prop, or we generated one via humanizeString above ~L75
+    return breadcrumb;
+  } else if (disableDefaults) {
+    // if there was no breadcrumb provided and user has disableDefaults turned on
+    return NO_BREADCRUMB;
+  }
+
+  // if the above conditionals don't fire, generate a default breadcrumb based on the path
+  return getDefaultBreadcrumb({
+    pathSection,
+    // include a "Home" breadcrumb by default (can be overrode or disabled in config)
+    currentSection: pathSection === '/' ? 'Home' : currentSection,
+    location,
+  });
 };
 
 export const getBreadcrumbs = ({ routes, location, options = {} }) => {
@@ -102,10 +118,10 @@ export const getBreadcrumbs = ({ routes, location, options = {} }) => {
 
       const breadcrumb = getBreadcrumb({
         currentSection,
-        excludePaths: options.excludePaths,
         location,
         pathSection,
         routes,
+        ...options,
       });
 
       // add the breadcrumb to the matches array

src/index.test.js

@@ -234,6 +234,15 @@ describe('react-router-breadcrumbs-hoc', () => {
         expect(breadcrumbs).toBe('Two');
       });
     });
+
+    describe('disableDefaults', () => {
+      it('Should disable all default breadcrumb generation', () => {
+        const routes = [{ path: '/one', breadcrumb: 'One' }, { path: '/one/two' }];
+        const { breadcrumbs } = render({ pathname: '/one/two', routes, options: { disableDefaults: true } });
+
+        expect(breadcrumbs).toBe('One');
+      });
+    });
   });
 
   describe('Invalid route object', () => {