Merge pull request #23 from mrchief/patch-1

Pass location object

Author: Justin Schrader

README.md

@@ -97,11 +97,20 @@ Breadcrumb = {
   breadcrumb: Component
 }
 
+// react-router's location object: https://reacttraining.com/react-router/web/api/location
+Location = {
+  key: String
+  pathname: String
+  search: String
+  hash: String
+  state: Object
+}
+
 withBreadcrumbs(routes: Array<Route>): HigherOrderComponent
 
 // you shouldn't ever really have to use `getBreadcrumbs`, but it's
 // exported for convenience if you don't want to use the HOC
-getBreadcrumbs({ routes: Array<Route>, pathname: String }): Array<Breadcrumb>
+getBreadcrumbs({ routes: Array<Route>, location: Location }): Array<Breadcrumb>
 ```
 
 ## Order Matters!
@@ -129,3 +138,27 @@ To get the right breadcrumbs, simply change the order:
 ```
 
 Now, `/users/create` will match the create breadcrumb first, and all others will fall through to `/:id`.
+
+## Dynamic Breadcrumbs
+React Router's [location](https://reacttraining.com/react-router/web/api/location) object let's you pass `state` property. Using the `state` allows one to update the Breadcrumb to display dynamic info at runtime. Consider this example:
+
+```jsx
+// Breadcrumb.js
+const Breadcrumb = ({location: { state: { isNew } } }) => {
+  return <span>{isNew ? 'Add New' : 'Update'}</span>  // lets one dynamically update Breadcrumb based on some state info
+}
+
+// routes
+{
+  pathname: '/editor',
+  breadcrumb: Breadcrumb
+  ...
+}
+
+// Component
+// Oversimplified example showing usage of state props
+<Link to={{pathname: '/editor'}}>Edit</Link>} // Upon navigation, breadcrumb will display: Update
+<Link to={{pathname: '/editor', state: {isNew: true}}}>Add</Link>} // Upon navigation, breadcrumb will display: Add New
+```
+
+Now based on what you pass in the `state` prop, the Breadcrumb will display dynamic values at runtime!

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-router-breadcrumbs-hoc",
-  "version": "1.1.2",
+  "version": "2.0.0",
   "description": "Just a tiny, flexible, higher order component for rendering breadcrumbs with react-router 4.x",
   "repository": "icd2k3/react-router-breadcrumbs-hoc",
   "keywords": [
@@ -30,6 +30,7 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-1": "^6.24.1",
     "coveralls": "^3.0.0",
+    "cross-env": "^5.1.3",
     "enzyme": "^3.2.0",
     "enzyme-adapter-react-16": "^1.1.0",
     "enzyme-to-json": "^3.3.0",
@@ -52,7 +53,7 @@
   "scripts": {
     "prepublishOnly": "npm run build",
     "build": "rollup -c",
-    "test": "NODE_ENV=test jest",
+    "test": "cross-env NODE_ENV=test jest",
     "travis": "jest && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
     "lint": "eslint ./src/**"
   }

src/__snapshots__/index.test.js.snap

@@ -274,6 +274,13 @@ exports[`react-router-breadcrumbs-hoc Valid routes Should render breadcrumb comp
             },
             Object {
               "breadcrumb": <breadcrumb
+                location={
+                  Object {
+                    "hash": "",
+                    "pathname": "/1/2/3/4",
+                    "search": "",
+                  }
+                }
                 match={
                   Object {
                     "isExact": true,
@@ -293,6 +300,13 @@ exports[`react-router-breadcrumbs-hoc Valid routes Should render breadcrumb comp
             },
             Object {
               "breadcrumb": <BreadcrumbMatchTest
+                location={
+                  Object {
+                    "hash": "",
+                    "pathname": "/1/2/3/4",
+                    "search": "",
+                  }
+                }
                 match={
                   Object {
                     "isExact": true,
@@ -316,6 +330,13 @@ exports[`react-router-breadcrumbs-hoc Valid routes Should render breadcrumb comp
             },
             Object {
               "breadcrumb": <BreadcrumbNavLinkTest
+                location={
+                  Object {
+                    "hash": "",
+                    "pathname": "/1/2/3/4",
+                    "search": "",
+                  }
+                }
                 match={
                   Object {
                     "isExact": true,
@@ -391,6 +412,13 @@ exports[`react-router-breadcrumbs-hoc Valid routes Should render breadcrumb comp
             key="/1/22"
           >
             <breadcrumb
+              location={
+                Object {
+                  "hash": "",
+                  "pathname": "/1/2/3/4",
+                  "search": "",
+                }
+              }
               match={
                 Object {
                   "isExact": true,
@@ -409,6 +437,13 @@ exports[`react-router-breadcrumbs-hoc Valid routes Should render breadcrumb comp
             key="/1/2/:number3"
           >
             <BreadcrumbMatchTest
+              location={
+                Object {
+                  "hash": "",
+                  "pathname": "/1/2/3/4",
+                  "search": "",
+                }
+              }
               match={
                 Object {
                   "isExact": true,
@@ -429,6 +464,13 @@ exports[`react-router-breadcrumbs-hoc Valid routes Should render breadcrumb comp
             key="/1/2/:number/44"
           >
             <BreadcrumbNavLinkTest
+              location={
+                Object {
+                  "hash": "",
+                  "pathname": "/1/2/3/4",
+                  "search": "",
+                }
+              }
               match={
                 Object {
                   "isExact": true,

src/index.js

@@ -5,15 +5,16 @@ const DEFAULT_MATCH_OPTIONS = { exact: true };
 
 // if user is passing a function (component) as a breadcrumb, make sure we
 // pass the match object into it. Else just return the string.
-const renderer = ({ breadcrumb, match }) => {
+const renderer = ({ breadcrumb, match, location }) => {
   if (typeof breadcrumb === 'function') {
-    return createElement(breadcrumb, { match });
+    return createElement(breadcrumb, { match, location });
   }
   return breadcrumb;
 };
 
-export const getBreadcrumbs = ({ routes, pathname }) => {
+export const getBreadcrumbs = ({ routes, location }) => {
   const matches = [];
+  const { pathname } = location;
 
   pathname
     // remove trailing slash "/" from pathname (avoids multiple of the same match)
@@ -42,7 +43,7 @@ export const getBreadcrumbs = ({ routes, pathname }) => {
         // and match object to add to the `matches` array
         if (match) {
           breadcrumbMatch = {
-            breadcrumb: renderer({ breadcrumb, match }),
+            breadcrumb: renderer({ breadcrumb, match, location }),
             path,
             match,
           };
@@ -67,7 +68,7 @@ export const withBreadcrumbs = routes => Component => withRouter(props =>
   createElement(Component, {
     ...props,
     breadcrumbs: getBreadcrumbs({
-      pathname: props.location.pathname,
       routes,
+      location: props.location,
     }),
   }));

src/index.test.js

@@ -131,7 +131,7 @@ describe('react-router-breadcrumbs-hoc', () => {
 
   describe('Invalid route object', () => {
     it('Should error if `path` is not provided', () => {
-      expect(() => getBreadcrumbs({ routes: [{ breadcrumb: 'Yo' }], pathname: '/1' }))
+      expect(() => getBreadcrumbs({ routes: [{ breadcrumb: 'Yo' }], location: { pathname: '/1' } }))
         .toThrow('withBreadcrumbs: `path` must be provided in every route object');
     });
   });

yarn.lock

@@ -1347,6 +1347,13 @@ coveralls@^3.0.0:
     minimist "^1.2.0"
     request "^2.79.0"
 
+cross-env@^5.1.3:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-5.1.3.tgz#f8ae18faac87692b0a8b4d2f7000d4ec3a85dfd7"
+  dependencies:
+    cross-spawn "^5.1.0"
+    is-windows "^1.0.0"
+
 cross-spawn@^5.0.1, cross-spawn@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@@ -2557,6 +2564,10 @@ is-utf8@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
 
+is-windows@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
+
 isarray@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"