react-router-breadcrumbs-hoc - npm Package Compare versions

Comparing version 3.2.7 to 3.2.8

dist/cjs/index.js

@@ -1,2 +0,2 @@
-"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),React__default=_interopDefault(React),reactRouter=require("react-router"),reactRouterDom=require("react-router-dom");function _defineProperty(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function ownKeys(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),r.push.apply(r,o)}return r}function _objectSpread2(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?ownKeys(Object(r),!0).forEach(function(e){_defineProperty(t,e,r[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):ownKeys(Object(r)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))})}return t}function _objectWithoutPropertiesLoose(e,t){if(null==e)return{};var r,o,n={},a=Object.keys(e);for(o=0;o<a.length;o++)r=a[o],0<=t.indexOf(r)||(n[r]=e[r]);return n}function _objectWithoutProperties(e,t){if(null==e)return{};var r,o,n=_objectWithoutPropertiesLoose(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)r=a[o],0<=t.indexOf(r)||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}function _toConsumableArray(e){return _arrayWithoutHoles(e)||_iterableToArray(e)||_nonIterableSpread()}function _arrayWithoutHoles(e){if(Array.isArray(e)){for(var t=0,r=new Array(e.length);t<e.length;t++)r[t]=e[t];return r}}function _iterableToArray(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance")}var DEFAULT_MATCH_OPTIONS={exact:!0},NO_BREADCRUMB="NO_BREADCRUMB",humanize=function(e){return e.replace(/^[\s_]+|[\s_]+$/g,"").replace(/[_\s]+/g," ").replace(/^[a-z]/,function(e){return e.toUpperCase()})},render=function(e){var t=e.breadcrumb,r=e.match,o=e.location,n=_objectWithoutProperties(e,["breadcrumb","match","location"]),a=_objectSpread2({match:r,location:o,key:r.url},n);return _objectSpread2({},a,{breadcrumb:"string"==typeof t?React.createElement("span",{key:a.key},t):React__default.createElement(t,a)})},getDefaultBreadcrumb=function(e){var t=e.currentSection,r=e.location,o=e.pathSection,n=reactRouter.matchPath(o,_objectSpread2({},DEFAULT_MATCH_OPTIONS,{path:o}))||{url:"not-found"};return render({breadcrumb:humanize(t),match:n,location:r})},getBreadcrumbMatch=function(e){var c,u=e.currentSection,i=e.disableDefaults,t=e.excludePaths,b=e.location,l=e.pathSection,r=e.routes;return t&&t.some(function(e){return reactRouter.matchPath(l,{path:e,exact:!0,strict:!1})})?NO_BREADCRUMB:(r.some(function(e){var t=e.breadcrumb,r=e.matchOptions,o=e.path,n=_objectWithoutProperties(e,["breadcrumb","matchOptions","path"]);if(!o)throw new Error("withBreadcrumbs: `path` must be provided in every route object");var a=reactRouter.matchPath(l,_objectSpread2({},r||DEFAULT_MATCH_OPTIONS,{path:o}));return a&&null===t||!a&&r?(c=NO_BREADCRUMB,!0):!!a&&(c=!t&&i?NO_BREADCRUMB:render(_objectSpread2({breadcrumb:t||humanize(u),match:a,location:b},n)),!0)}),c||(i?NO_BREADCRUMB:getDefaultBreadcrumb({pathSection:l,currentSection:"/"===l?"Home":u,location:b})))},getBreadcrumbs=function(e){var n=e.routes,a=e.location,t=e.options,c=void 0===t?{}:t,u=[];return a.pathname.split("?")[0].replace(/\/$/,"").split("/").reduce(function(e,t){var r=t?"".concat(e,"/").concat(t):"/",o=getBreadcrumbMatch(_objectSpread2({currentSection:t,location:a,pathSection:r,routes:n},c));return o!==NO_BREADCRUMB&&u.push(o),"/"===r?"":r},""),u},flattenRoutes=function r(e){return e.reduce(function(e,t){return t.routes?e.concat([t].concat(_toConsumableArray(r(t.routes)))):e.concat(t)},[])},index=function(e,o){return function(t){var r={options:o,routes:flattenRoutes(e||[])};return reactRouterDom.useLocation?function(e){return React__default.createElement(t,_objectSpread2({},e,{breadcrumbs:getBreadcrumbs(_objectSpread2({},r,{location:reactRouterDom.useLocation()}))}))}:reactRouter.withRouter(function(e){return 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"),React.createElement(t,_objectSpread2({},e,{breadcrumbs:getBreadcrumbs(_objectSpread2({},r,{location:e.location}))}))})}};exports.default=index,exports.getBreadcrumbs=getBreadcrumbs;
+"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),React__default=_interopDefault(React),reactRouter=require("react-router");function _defineProperty(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function ownKeys(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),r.push.apply(r,o)}return r}function _objectSpread2(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?ownKeys(Object(r),!0).forEach(function(e){_defineProperty(t,e,r[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):ownKeys(Object(r)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))})}return t}function _objectWithoutPropertiesLoose(e,t){if(null==e)return{};var r,o,n={},a=Object.keys(e);for(o=0;o<a.length;o++)r=a[o],0<=t.indexOf(r)||(n[r]=e[r]);return n}function _objectWithoutProperties(e,t){if(null==e)return{};var r,o,n=_objectWithoutPropertiesLoose(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)r=a[o],0<=t.indexOf(r)||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}function _toConsumableArray(e){return _arrayWithoutHoles(e)||_iterableToArray(e)||_nonIterableSpread()}function _arrayWithoutHoles(e){if(Array.isArray(e)){for(var t=0,r=new Array(e.length);t<e.length;t++)r[t]=e[t];return r}}function _iterableToArray(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance")}var DEFAULT_MATCH_OPTIONS={exact:!0},NO_BREADCRUMB="NO_BREADCRUMB",humanize=function(e){return e.replace(/^[\s_]+|[\s_]+$/g,"").replace(/[_\s]+/g," ").replace(/^[a-z]/,function(e){return e.toUpperCase()})},render=function(e){var t=e.breadcrumb,r=e.match,o=e.location,n=_objectWithoutProperties(e,["breadcrumb","match","location"]),a=_objectSpread2({match:r,location:o,key:r.url},n);return _objectSpread2({},a,{breadcrumb:"string"==typeof t?React.createElement("span",{key:a.key},t):React__default.createElement(t,a)})},getDefaultBreadcrumb=function(e){var t=e.currentSection,r=e.location,o=e.pathSection,n=reactRouter.matchPath(o,_objectSpread2({},DEFAULT_MATCH_OPTIONS,{path:o}))||{url:"not-found"};return render({breadcrumb:humanize(t),match:n,location:r})},getBreadcrumbMatch=function(e){var c,u=e.currentSection,i=e.disableDefaults,t=e.excludePaths,b=e.location,l=e.pathSection,r=e.routes;return t&&t.some(function(e){return reactRouter.matchPath(l,{path:e,exact:!0,strict:!1})})?NO_BREADCRUMB:(r.some(function(e){var t=e.breadcrumb,r=e.matchOptions,o=e.path,n=_objectWithoutProperties(e,["breadcrumb","matchOptions","path"]);if(!o)throw new Error("withBreadcrumbs: `path` must be provided in every route object");var a=reactRouter.matchPath(l,_objectSpread2({},r||DEFAULT_MATCH_OPTIONS,{path:o}));return a&&null===t||!a&&r?(c=NO_BREADCRUMB,!0):!!a&&(c=!t&&i?NO_BREADCRUMB:render(_objectSpread2({breadcrumb:t||humanize(u),match:a,location:b},n)),!0)}),c||(i?NO_BREADCRUMB:getDefaultBreadcrumb({pathSection:l,currentSection:"/"===l?"Home":u,location:b})))},getBreadcrumbs=function(e){var n=e.routes,a=e.location,t=e.options,c=void 0===t?{}:t,u=[];return a.pathname.split("?")[0].replace(/\/$/,"").split("/").reduce(function(e,t){var r=t?"".concat(e,"/").concat(t):"/",o=getBreadcrumbMatch(_objectSpread2({currentSection:t,location:a,pathSection:r,routes:n},c));return o!==NO_BREADCRUMB&&u.push(o),"/"===r?"":r},""),u},flattenRoutes=function r(e){return e.reduce(function(e,t){return t.routes?e.concat([t].concat(_toConsumableArray(r(t.routes)))):e.concat(t)},[])},index=function(e,o){return function(t){var r={options:o,routes:flattenRoutes(e||[])};return reactRouter.useLocation?function(e){return React__default.createElement(t,_objectSpread2({},e,{breadcrumbs:getBreadcrumbs(_objectSpread2({},r,{location:reactRouter.useLocation()}))}))}:reactRouter.withRouter(function(e){return 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"),React.createElement(t,_objectSpread2({},e,{breadcrumbs:getBreadcrumbs(_objectSpread2({},r,{location:e.location}))}))})}};exports.default=index,exports.getBreadcrumbs=getBreadcrumbs;
 //# sourceMappingURL=index.js.map

dist/es/index.js

 import React, { createElement } from 'react';
-import { withRouter, matchPath } from 'react-router';
-import { useLocation } from 'react-router-dom';
+import { useLocation, withRouter, matchPath } from 'react-router';
 
@@ -5,0 +4,0 @@ function _defineProperty(obj, key, value) {

dist/umd/index.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react-router"),require("react-router-dom")):"function"==typeof define&&define.amd?define(["exports","react","react-router","react-router-dom"],t):t((e=e||self)["react-router-breadcrumbs-hoc"]={},e.React,e.ReactRouter,e.reactRouterDom)}(this,function(e,a,b,o){"use strict";var u="default"in a?a.default:a;function t(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),r.push.apply(r,n)}return r}function m(o){for(var e=1;e<arguments.length;e++){var c=null!=arguments[e]?arguments[e]:{};e%2?t(Object(c),!0).forEach(function(e){var t,r,n;t=o,n=c[r=e],r in t?Object.defineProperty(t,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[r]=n}):Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(c)):t(Object(c)).forEach(function(e){Object.defineProperty(o,e,Object.getOwnPropertyDescriptor(c,e))})}return o}function d(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},c=Object.keys(e);for(n=0;n<c.length;n++)r=c[n],0<=t.indexOf(r)||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n<c.length;n++)r=c[n],0<=t.indexOf(r)||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function c(e){return function(e){if(Array.isArray(e)){for(var t=0,r=new Array(e.length);t<e.length;t++)r[t]=e[t];return r}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function h(e){return e.replace(/^[\s_]+|[\s_]+$/g,"").replace(/[_\s]+/g," ").replace(/^[a-z]/,function(e){return e.toUpperCase()})}function y(e){var t=e.breadcrumb,r=e.match,n=e.location,o=d(e,["breadcrumb","match","location"]),c=m({match:r,location:n,key:r.url},o);return m({},c,{breadcrumb:"string"==typeof t?a.createElement("span",{key:c.key},t):u.createElement(t,c)})}function i(e){var a,t,r,n,o,c,u=e.currentSection,i=e.disableDefaults,l=e.excludePaths,s=e.location,p=e.pathSection,f=e.routes;return l&&l.some(function(e){return b.matchPath(p,{path:e,exact:!0,strict:!1})})?v:(f.some(function(e){var t=e.breadcrumb,r=e.matchOptions,n=e.path,o=d(e,["breadcrumb","matchOptions","path"]);if(!n)throw new Error("withBreadcrumbs: `path` must be provided in every route object");var c=b.matchPath(p,m({},r||O,{path:n}));return c&&null===t||!c&&r?(a=v,!0):!!c&&(a=!t&&i?v:y(m({breadcrumb:t||h(u),match:c,location:s},o)),!0)}),a||(i?v:(r=(t={pathSection:p,currentSection:"/"===p?"Home":u,location:s}).currentSection,n=t.location,o=t.pathSection,c=b.matchPath(o,m({},O,{path:o}))||{url:"not-found"},y({breadcrumb:h(r),match:c,location:n}))))}function l(e){var o=e.routes,c=e.location,t=e.options,a=void 0===t?{}:t,u=[];return c.pathname.split("?")[0].replace(/\/$/,"").split("/").reduce(function(e,t){var r=t?"".concat(e,"/").concat(t):"/",n=i(m({currentSection:t,location:c,pathSection:r,routes:o},a));return n!==v&&u.push(n),"/"===r?"":r},""),u}var O={exact:!0},v="NO_BREADCRUMB";e.default=function(e,n){return function(t){var r={options:n,routes:function r(e){return e.reduce(function(e,t){return t.routes?e.concat([t].concat(c(r(t.routes)))):e.concat(t)},[])}(e||[])};return o.useLocation?function(e){return u.createElement(t,m({},e,{breadcrumbs:l(m({},r,{location:o.useLocation()}))}))}:b.withRouter(function(e){return 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"),a.createElement(t,m({},e,{breadcrumbs:l(m({},r,{location:e.location}))}))})}},e.getBreadcrumbs=l,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react-router")):"function"==typeof define&&define.amd?define(["exports","react","react-router"],t):t((e=e||self)["react-router-breadcrumbs-hoc"]={},e.React,e.ReactRouter)}(this,function(e,a,b){"use strict";var u="default"in a?a.default:a;function t(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),r.push.apply(r,n)}return r}function m(o){for(var e=1;e<arguments.length;e++){var c=null!=arguments[e]?arguments[e]:{};e%2?t(Object(c),!0).forEach(function(e){var t,r,n;t=o,n=c[r=e],r in t?Object.defineProperty(t,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[r]=n}):Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(c)):t(Object(c)).forEach(function(e){Object.defineProperty(o,e,Object.getOwnPropertyDescriptor(c,e))})}return o}function d(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},c=Object.keys(e);for(n=0;n<c.length;n++)r=c[n],0<=t.indexOf(r)||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n<c.length;n++)r=c[n],0<=t.indexOf(r)||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function o(e){return function(e){if(Array.isArray(e)){for(var t=0,r=new Array(e.length);t<e.length;t++)r[t]=e[t];return r}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function h(e){return e.replace(/^[\s_]+|[\s_]+$/g,"").replace(/[_\s]+/g," ").replace(/^[a-z]/,function(e){return e.toUpperCase()})}function y(e){var t=e.breadcrumb,r=e.match,n=e.location,o=d(e,["breadcrumb","match","location"]),c=m({match:r,location:n,key:r.url},o);return m({},c,{breadcrumb:"string"==typeof t?a.createElement("span",{key:c.key},t):u.createElement(t,c)})}function i(e){var a,t,r,n,o,c,u=e.currentSection,i=e.disableDefaults,l=e.excludePaths,s=e.location,p=e.pathSection,f=e.routes;return l&&l.some(function(e){return b.matchPath(p,{path:e,exact:!0,strict:!1})})?v:(f.some(function(e){var t=e.breadcrumb,r=e.matchOptions,n=e.path,o=d(e,["breadcrumb","matchOptions","path"]);if(!n)throw new Error("withBreadcrumbs: `path` must be provided in every route object");var c=b.matchPath(p,m({},r||O,{path:n}));return c&&null===t||!c&&r?(a=v,!0):!!c&&(a=!t&&i?v:y(m({breadcrumb:t||h(u),match:c,location:s},o)),!0)}),a||(i?v:(r=(t={pathSection:p,currentSection:"/"===p?"Home":u,location:s}).currentSection,n=t.location,o=t.pathSection,c=b.matchPath(o,m({},O,{path:o}))||{url:"not-found"},y({breadcrumb:h(r),match:c,location:n}))))}function c(e){var o=e.routes,c=e.location,t=e.options,a=void 0===t?{}:t,u=[];return c.pathname.split("?")[0].replace(/\/$/,"").split("/").reduce(function(e,t){var r=t?"".concat(e,"/").concat(t):"/",n=i(m({currentSection:t,location:c,pathSection:r,routes:o},a));return n!==v&&u.push(n),"/"===r?"":r},""),u}var O={exact:!0},v="NO_BREADCRUMB";e.default=function(e,n){return function(t){var r={options:n,routes:function r(e){return e.reduce(function(e,t){return t.routes?e.concat([t].concat(o(r(t.routes)))):e.concat(t)},[])}(e||[])};return b.useLocation?function(e){return u.createElement(t,m({},e,{breadcrumbs:c(m({},r,{location:b.useLocation()}))}))}:b.withRouter(function(e){return 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"),a.createElement(t,m({},e,{breadcrumbs:c(m({},r,{location:e.location}))}))})}},e.getBreadcrumbs=c,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-router-breadcrumbs-hoc",
-  "version": "3.2.7",
+  "version": "3.2.8",
   "description": "small, flexible, higher order component for rendering breadcrumbs with react-router 4.x",
@@ -31,4 +31,3 @@ "repository": "icd2k3/react-router-breadcrumbs-hoc",
     "react": ">=16.8",
-    "react-router": ">=4",
-    "react-router-dom": ">=4"
+    "react-router": ">=4"
   },
@@ -70,3 +69,2 @@ "dependencies": {},
     "react-router": "^5.1.2",
-    "react-router-dom": "^5.1.2",
     "rollup": "^2.1.0",
@@ -73,0 +71,0 @@ "rollup-plugin-babel": "^4.4.0",

README.md

@@ -18,5 +18,10 @@ <h3 align="center">
 
+--- 
+> Do you prefer hooks? Are you using `react-router v5.1+`? Try [use-react-router-breadcrumbs](https://github.com/icd2k3/use-react-router-breadcrumbs).
+---
+
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 - [Description](#description)
+    - [Features](#features)
 - [Install](#install)
@@ -27,5 +32,6 @@ - [Usage](#usage)
   - [Advanced](#advanced)
-- [Already using a route config array with react-router?](#already-using-a-route-config-array-with-react-router)
-- [Disabling default generated breadcrumbs](#disabling-default-generated-breadcrumbs)
+- [Route config compatibility](#route-config-compatibility)
 - [Dynamic breadcrumbs](#dynamic-breadcrumbs)
+- [Options](#options)
+  - [Disabling default generated breadcrumbs](#disabling-default-generated-breadcrumbs)
 - [Order matters!](#order-matters)
@@ -38,4 +44,9 @@ - [API](#api)
 
-Deconstruct a route and return matching breadcrumb components you can render however you like. Render a simple string, a component that fetches a model in order to display the desired content, or just render something totally unrelated to the route.
+Render breadcrumbs for `react-router` however you want!
 
+#### Features
+- Easy to get started with automatically generated breadcrumbs.
+- Render, map, and wrap breadcrumbs any way you want.
+- Compatible with existing [route configs](https://reacttraining.com/react-router/web/example/route-config).
+
 ## Install
@@ -47,3 +58,3 @@
 
-`npm install react-router-breadcrumbs-hoc --save`
+`npm i react-router-breadcrumbs-hoc --save`
 
@@ -84,2 +95,4 @@ ## Usage
 
+// define custom breadcrumbs for certain routes.
+// breadcumbs can be components or strings.
 const routes = [
@@ -90,3 +103,3 @@ { path: '/users/:userId', breadcrumb: DynamicUserBreadcrumb },
 
-// map & render your breadcrumb components however you want.
+// map, render, and wrap your breadcrumb components however you want.
 const Breadcrumbs = ({ breadcrumbs }) => (
@@ -97,4 +110,2 @@ <div>
       breadcrumb
-      // other props are available during render, such as `location` 
-      // and any props found in your route objects will be passed through too
     }) => (
@@ -119,27 +130,35 @@ <span key={match.url}>
 
-## Already using a [route config](https://reacttraining.com/react-router/web/example/route-config) array with react-router?
+## [Route config](https://reacttraining.com/react-router/web/example/route-config) compatibility
 
-Just add a `breadcrumb` prop to your routes that require custom breadcrumbs.
+Add breadcrumbs to your existing [route config](https://reacttraining.com/react-router/web/example/route-config). This is a great way to keep all routing config paths in a single place! If a path ever changes, you'll only have to change it in your main route config rather than maintaining a _separate_ config for `react-router-breadcrumbs-hoc`.
 
-`{ path, component }` -> `{ path, component, breadcrumb }`
+For example...
 
-`withBreadcrumbs(routeConfig)(MyComponent)`
+```js
+const routeConfig = [
+  {
+    path: "/sandwiches",
+    component: Sandwiches
+  }
+];
+```
 
-## Disabling default generated breadcrumbs
+becomes...
 
-This package will attempt to create breadcrumbs for you based on the route section. For example `/users` will auotmatically create the breadcrumb `"Users"`. There are two ways to disable default breadcrumbs for a path:
+```js
+const routeConfig = [
+  {
+    path: "/sandwiches",
+    component: Sandwiches,
+    breadcrumb: 'I love sandwiches'
+  }
+];
+```
 
-**Option 1:** Disable _all_ default breadcrumb generation by passing `disableDefaults: true` in the `options` object
+then you can just pass the whole route config right into the hook:
 
-`withBreadcrumbs(routes, { disableDefaults: true })`
+```js
+withBreadcrumbs(routeConfig)(MyComponent);
+```
 
-**Option 2:** Disable _individual_ default breadcrumbs by passing `breadcrumb: null` in route config:
-
-`{ path: '/a/b', breadcrumb: null }`
-
-**Option 3:** Disable _individual_ default breadcrumbs by passing an `excludePaths` array in the `options` object
-
-`withBreadcrumbs(routes, { excludePaths: ['/', '/no-breadcrumb/for-this-route'] })`
-
-
 ## Dynamic breadcrumbs
@@ -166,2 +185,11 @@
 
+Now we can pass this custom `redux` breadcrumb into the HOC:
+
+```js
+withBreadcrumbs([{
+  path: '/users/:id',
+  breadcrumb: UserBreadcrumb
+}]);
+```
+
 ----
@@ -186,2 +214,31 @@
 
+## Options
+
+An options object can be passed as the 2nd argument to the hook.
+
+```js
+withBreadcrumbs(routes, options)(Component);
+```
+
+Option | Type | Description
+--- | --- | ---
+`disableDefaults` | `Boolean` | Disables all default generated breadcrumbs. |
+`excludePaths` | `Array<String>` | Disables default generated breadcrumbs for specific paths. |
+
+### Disabling default generated breadcrumbs
+
+This package will attempt to create breadcrumbs for you based on the route section. For example `/users` will automatically create the breadcrumb `"Users"`. There are two ways to disable default breadcrumbs for a path:
+
+**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 3:** Disable _individual_ default breadcrumbs by passing an `excludePaths` array in the `options` object
+
+`withBreadcrumbs(routes, { excludePaths: ['/', '/no-breadcrumb/for-this-route'] })`
+
 ## Order matters!
@@ -188,0 +245,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

74932

increased by1.07%

Dependency count

2

decreased by-33.33%

Dev dependency count

37

decreased by-2.63%

Number of lines in readme file

287

increased by24.78%

Worsened metrics

Lines of code

460

decreased by-0.86%

No dependency changes