react-router-breadcrumbs-hoc
Advanced tools
react-router-breadcrumbs-hoc - npm Package Compare versions
Comparing version 1.1.2 to 1.2.0
@@ -1,2 +0,2 @@ | ||
| {"/Users/justinschrader/Desktop/KOAN/opensource/react-router-breadcrumbs-hoc/src/index.js": {"path":"/Users/justinschrader/Desktop/KOAN/opensource/react-router-breadcrumbs-hoc/src/index.js","statementMap":{"0":{"start":{"line":4,"column":30},"end":{"line":4,"column":45}},"1":{"start":{"line":8,"column":17},"end":{"line":13,"column":1}},"2":{"start":{"line":9,"column":2},"end":{"line":11,"column":3}},"3":{"start":{"line":10,"column":4},"end":{"line":10,"column":48}},"4":{"start":{"line":12,"column":2},"end":{"line":12,"column":20}},"5":{"start":{"line":15,"column":30},"end":{"line":64,"column":1}},"6":{"start":{"line":16,"column":18},"end":{"line":16,"column":20}},"7":{"start":{"line":18,"column":2},"end":{"line":61,"column":13}},"8":{"start":{"line":28,"column":26},"end":{"line":28,"column":67}},"9":{"start":{"line":32,"column":6},"end":{"line":53,"column":9}},"10":{"start":{"line":33,"column":8},"end":{"line":35,"column":9}},"11":{"start":{"line":34,"column":10},"end":{"line":34,"column":92}},"12":{"start":{"line":36,"column":8},"end":{"line":38,"column":9}},"13":{"start":{"line":37,"column":10},"end":{"line":37,"column":23}},"14":{"start":{"line":39,"column":22},"end":{"line":39,"column":98}},"15":{"start":{"line":43,"column":8},"end":{"line":50,"column":9}},"16":{"start":{"line":44,"column":10},"end":{"line":48,"column":12}},"17":{"start":{"line":49,"column":10},"end":{"line":49,"column":22}},"18":{"start":{"line":52,"column":8},"end":{"line":52,"column":21}},"19":{"start":{"line":56,"column":6},"end":{"line":58,"column":7}},"20":{"start":{"line":57,"column":8},"end":{"line":57,"column":38}},"21":{"start":{"line":60,"column":6},"end":{"line":60,"column":52}},"22":{"start":{"line":63,"column":2},"end":{"line":63,"column":17}},"23":{"start":{"line":66,"column":31},"end":{"line":73,"column":5}},"24":{"start":{"line":66,"column":41},"end":{"line":73,"column":5}},"25":{"start":{"line":66,"column":54},"end":{"line":73,"column":5}},"26":{"start":{"line":67,"column":2},"end":{"line":73,"column":4}}},"fnMap":{"0":{"name":"(anonymous_0)","decl":{"start":{"line":8,"column":17},"end":{"line":8,"column":18}},"loc":{"start":{"line":8,"column":44},"end":{"line":13,"column":1}},"line":8},"1":{"name":"(anonymous_1)","decl":{"start":{"line":15,"column":30},"end":{"line":15,"column":31}},"loc":{"start":{"line":15,"column":56},"end":{"line":64,"column":1}},"line":15},"2":{"name":"(anonymous_2)","decl":{"start":{"line":24,"column":12},"end":{"line":24,"column":13}},"loc":{"start":{"line":24,"column":35},"end":{"line":61,"column":5}},"line":24},"3":{"name":"(anonymous_3)","decl":{"start":{"line":32,"column":18},"end":{"line":32,"column":19}},"loc":{"start":{"line":32,"column":58},"end":{"line":53,"column":7}},"line":32},"4":{"name":"(anonymous_4)","decl":{"start":{"line":66,"column":31},"end":{"line":66,"column":32}},"loc":{"start":{"line":66,"column":41},"end":{"line":73,"column":5}},"line":66},"5":{"name":"(anonymous_5)","decl":{"start":{"line":66,"column":41},"end":{"line":66,"column":42}},"loc":{"start":{"line":66,"column":54},"end":{"line":73,"column":5}},"line":66},"6":{"name":"(anonymous_6)","decl":{"start":{"line":66,"column":65},"end":{"line":66,"column":66}},"loc":{"start":{"line":67,"column":2},"end":{"line":73,"column":4}},"line":67}},"branchMap":{"0":{"loc":{"start":{"line":9,"column":2},"end":{"line":11,"column":3}},"type":"if","locations":[{"start":{"line":9,"column":2},"end":{"line":11,"column":3}},{"start":{"line":9,"column":2},"end":{"line":11,"column":3}}],"line":9},"1":{"loc":{"start":{"line":28,"column":26},"end":{"line":28,"column":67}},"type":"cond-expr","locations":[{"start":{"line":28,"column":37},"end":{"line":28,"column":40}},{"start":{"line":28,"column":43},"end":{"line":28,"column":67}}],"line":28},"2":{"loc":{"start":{"line":33,"column":8},"end":{"line":35,"column":9}},"type":"if","locations":[{"start":{"line":33,"column":8},"end":{"line":35,"column":9}},{"start":{"line":33,"column":8},"end":{"line":35,"column":9}}],"line":33},"3":{"loc":{"start":{"line":36,"column":8},"end":{"line":38,"column":9}},"type":"if","locations":[{"start":{"line":36,"column":8},"end":{"line":38,"column":9}},{"start":{"line":36,"column":8},"end":{"line":38,"column":9}}],"line":36},"4":{"loc":{"start":{"line":39,"column":51},"end":{"line":39,"column":88}},"type":"binary-expr","locations":[{"start":{"line":39,"column":51},"end":{"line":39,"column":63}},{"start":{"line":39,"column":67},"end":{"line":39,"column":88}}],"line":39},"5":{"loc":{"start":{"line":43,"column":8},"end":{"line":50,"column":9}},"type":"if","locations":[{"start":{"line":43,"column":8},"end":{"line":50,"column":9}},{"start":{"line":43,"column":8},"end":{"line":50,"column":9}}],"line":43},"6":{"loc":{"start":{"line":56,"column":6},"end":{"line":58,"column":7}},"type":"if","locations":[{"start":{"line":56,"column":6},"end":{"line":58,"column":7}}],"line":56},"7":{"loc":{"start":{"line":60,"column":13},"end":{"line":60,"column":51}},"type":"cond-expr","locations":[{"start":{"line":60,"column":35},"end":{"line":60,"column":37}},{"start":{"line":60,"column":40},"end":{"line":60,"column":51}}],"line":60}},"s":{"0":1,"1":1,"2":7,"3":3,"4":4,"5":1,"6":5,"7":5,"8":12,"9":12,"10":24,"11":1,"12":23,"13":2,"14":21,"15":21,"16":7,"17":7,"18":14,"19":11,"20":7,"21":11,"22":4,"23":1,"24":4,"25":4,"26":4},"f":{"0":7,"1":5,"2":12,"3":24,"4":4,"5":4,"6":4},"b":{"0":[3,4],"1":[4,8],"2":[1,23],"3":[2,21],"4":[21,18],"5":[7,14],"6":[7],"7":[3,8]},"_coverageSchema":"332fd63041d2c1bcb487cc26dd0d5f7d97098a6c","hash":"a98a788e2b5e9322c0e091be0202e438ce507654"} | ||
| {"/Users/justinschrader/Desktop/KOAN/opensource/react-router-breadcrumbs-hoc/src/index.js": {"path":"/Users/justinschrader/Desktop/KOAN/opensource/react-router-breadcrumbs-hoc/src/index.js","statementMap":{"0":{"start":{"line":4,"column":30},"end":{"line":4,"column":45}},"1":{"start":{"line":8,"column":17},"end":{"line":13,"column":1}},"2":{"start":{"line":9,"column":2},"end":{"line":11,"column":3}},"3":{"start":{"line":10,"column":4},"end":{"line":10,"column":58}},"4":{"start":{"line":12,"column":2},"end":{"line":12,"column":20}},"5":{"start":{"line":15,"column":30},"end":{"line":65,"column":1}},"6":{"start":{"line":16,"column":18},"end":{"line":16,"column":20}},"7":{"start":{"line":17,"column":23},"end":{"line":17,"column":31}},"8":{"start":{"line":19,"column":2},"end":{"line":62,"column":13}},"9":{"start":{"line":29,"column":26},"end":{"line":29,"column":67}},"10":{"start":{"line":33,"column":6},"end":{"line":54,"column":9}},"11":{"start":{"line":34,"column":8},"end":{"line":36,"column":9}},"12":{"start":{"line":35,"column":10},"end":{"line":35,"column":92}},"13":{"start":{"line":37,"column":8},"end":{"line":39,"column":9}},"14":{"start":{"line":38,"column":10},"end":{"line":38,"column":23}},"15":{"start":{"line":40,"column":22},"end":{"line":40,"column":98}},"16":{"start":{"line":44,"column":8},"end":{"line":51,"column":9}},"17":{"start":{"line":45,"column":10},"end":{"line":49,"column":12}},"18":{"start":{"line":50,"column":10},"end":{"line":50,"column":22}},"19":{"start":{"line":53,"column":8},"end":{"line":53,"column":21}},"20":{"start":{"line":57,"column":6},"end":{"line":59,"column":7}},"21":{"start":{"line":58,"column":8},"end":{"line":58,"column":38}},"22":{"start":{"line":61,"column":6},"end":{"line":61,"column":52}},"23":{"start":{"line":64,"column":2},"end":{"line":64,"column":17}},"24":{"start":{"line":67,"column":31},"end":{"line":74,"column":5}},"25":{"start":{"line":67,"column":41},"end":{"line":74,"column":5}},"26":{"start":{"line":67,"column":54},"end":{"line":74,"column":5}},"27":{"start":{"line":68,"column":2},"end":{"line":74,"column":4}}},"fnMap":{"0":{"name":"(anonymous_0)","decl":{"start":{"line":8,"column":17},"end":{"line":8,"column":18}},"loc":{"start":{"line":8,"column":54},"end":{"line":13,"column":1}},"line":8},"1":{"name":"(anonymous_1)","decl":{"start":{"line":15,"column":30},"end":{"line":15,"column":31}},"loc":{"start":{"line":15,"column":56},"end":{"line":65,"column":1}},"line":15},"2":{"name":"(anonymous_2)","decl":{"start":{"line":25,"column":12},"end":{"line":25,"column":13}},"loc":{"start":{"line":25,"column":35},"end":{"line":62,"column":5}},"line":25},"3":{"name":"(anonymous_3)","decl":{"start":{"line":33,"column":18},"end":{"line":33,"column":19}},"loc":{"start":{"line":33,"column":58},"end":{"line":54,"column":7}},"line":33},"4":{"name":"(anonymous_4)","decl":{"start":{"line":67,"column":31},"end":{"line":67,"column":32}},"loc":{"start":{"line":67,"column":41},"end":{"line":74,"column":5}},"line":67},"5":{"name":"(anonymous_5)","decl":{"start":{"line":67,"column":41},"end":{"line":67,"column":42}},"loc":{"start":{"line":67,"column":54},"end":{"line":74,"column":5}},"line":67},"6":{"name":"(anonymous_6)","decl":{"start":{"line":67,"column":65},"end":{"line":67,"column":66}},"loc":{"start":{"line":68,"column":2},"end":{"line":74,"column":4}},"line":68}},"branchMap":{"0":{"loc":{"start":{"line":9,"column":2},"end":{"line":11,"column":3}},"type":"if","locations":[{"start":{"line":9,"column":2},"end":{"line":11,"column":3}},{"start":{"line":9,"column":2},"end":{"line":11,"column":3}}],"line":9},"1":{"loc":{"start":{"line":29,"column":26},"end":{"line":29,"column":67}},"type":"cond-expr","locations":[{"start":{"line":29,"column":37},"end":{"line":29,"column":40}},{"start":{"line":29,"column":43},"end":{"line":29,"column":67}}],"line":29},"2":{"loc":{"start":{"line":34,"column":8},"end":{"line":36,"column":9}},"type":"if","locations":[{"start":{"line":34,"column":8},"end":{"line":36,"column":9}},{"start":{"line":34,"column":8},"end":{"line":36,"column":9}}],"line":34},"3":{"loc":{"start":{"line":37,"column":8},"end":{"line":39,"column":9}},"type":"if","locations":[{"start":{"line":37,"column":8},"end":{"line":39,"column":9}},{"start":{"line":37,"column":8},"end":{"line":39,"column":9}}],"line":37},"4":{"loc":{"start":{"line":40,"column":51},"end":{"line":40,"column":88}},"type":"binary-expr","locations":[{"start":{"line":40,"column":51},"end":{"line":40,"column":63}},{"start":{"line":40,"column":67},"end":{"line":40,"column":88}}],"line":40},"5":{"loc":{"start":{"line":44,"column":8},"end":{"line":51,"column":9}},"type":"if","locations":[{"start":{"line":44,"column":8},"end":{"line":51,"column":9}},{"start":{"line":44,"column":8},"end":{"line":51,"column":9}}],"line":44},"6":{"loc":{"start":{"line":57,"column":6},"end":{"line":59,"column":7}},"type":"if","locations":[{"start":{"line":57,"column":6},"end":{"line":59,"column":7}}],"line":57},"7":{"loc":{"start":{"line":61,"column":13},"end":{"line":61,"column":51}},"type":"cond-expr","locations":[{"start":{"line":61,"column":35},"end":{"line":61,"column":37}},{"start":{"line":61,"column":40},"end":{"line":61,"column":51}}],"line":61}},"s":{"0":1,"1":1,"2":7,"3":3,"4":4,"5":1,"6":5,"7":5,"8":5,"9":12,"10":12,"11":24,"12":1,"13":23,"14":2,"15":21,"16":21,"17":7,"18":7,"19":14,"20":11,"21":7,"22":11,"23":4,"24":1,"25":4,"26":4,"27":4},"f":{"0":7,"1":5,"2":12,"3":24,"4":4,"5":4,"6":4},"b":{"0":[3,4],"1":[4,8],"2":[1,23],"3":[2,21],"4":[21,18],"5":[7,14],"6":[7],"7":[3,8]},"_coverageSchema":"332fd63041d2c1bcb487cc26dd0d5f7d97098a6c","hash":"b4a5919319f29e5a722e0acb72f72cae1e4d6370"} | ||
| } |
@@ -24,6 +24,7 @@ import { createElement } from 'react'; | ||
| var breadcrumb = _ref.breadcrumb, | ||
| match = _ref.match; | ||
| match = _ref.match, | ||
| location = _ref.location; | ||
| if (typeof breadcrumb === 'function') { | ||
| return createElement(breadcrumb, { match: match }); | ||
| return createElement(breadcrumb, { match: match, location: location }); | ||
| } | ||
@@ -35,6 +36,8 @@ return breadcrumb; | ||
| var routes = _ref2.routes, | ||
| pathname = _ref2.pathname; | ||
| location = _ref2.location; | ||
| var matches = []; | ||
| var pathname = location.pathname; | ||
| pathname | ||
@@ -71,3 +74,3 @@ // remove trailing slash "/" from pathname (avoids multiple of the same match) | ||
| breadcrumbMatch = { | ||
| breadcrumb: renderer({ breadcrumb: breadcrumb, match: match }), | ||
| breadcrumb: renderer({ breadcrumb: breadcrumb, match: match, location: location }), | ||
| path: path, | ||
@@ -98,4 +101,4 @@ match: match | ||
| breadcrumbs: getBreadcrumbs({ | ||
| pathname: props.location.pathname, | ||
| routes: routes | ||
| routes: routes, | ||
| location: props.location | ||
| }) | ||
@@ -102,0 +105,0 @@ })); |
@@ -27,6 +27,7 @@ (function (global, factory) { | ||
| var breadcrumb = _ref.breadcrumb, | ||
| match = _ref.match; | ||
| match = _ref.match, | ||
| location = _ref.location; | ||
| if (typeof breadcrumb === 'function') { | ||
| return react.createElement(breadcrumb, { match: match }); | ||
| return react.createElement(breadcrumb, { match: match, location: location }); | ||
| } | ||
@@ -38,6 +39,8 @@ return breadcrumb; | ||
| var routes = _ref2.routes, | ||
| pathname = _ref2.pathname; | ||
| location = _ref2.location; | ||
| var matches = []; | ||
| var pathname = location.pathname; | ||
| pathname | ||
@@ -74,3 +77,3 @@ // remove trailing slash "/" from pathname (avoids multiple of the same match) | ||
| breadcrumbMatch = { | ||
| breadcrumb: renderer({ breadcrumb: breadcrumb, match: match }), | ||
| breadcrumb: renderer({ breadcrumb: breadcrumb, match: match, location: location }), | ||
| path: path, | ||
@@ -101,4 +104,4 @@ match: match | ||
| breadcrumbs: getBreadcrumbs({ | ||
| pathname: props.location.pathname, | ||
| routes: routes | ||
| routes: routes, | ||
| location: props.location | ||
| }) | ||
@@ -105,0 +108,0 @@ })); |
| { | ||
| "name": "react-router-breadcrumbs-hoc", | ||
| "version": "1.1.2", | ||
| "version": "1.2.0", | ||
| "description": "Just a tiny, flexible, higher order component for rendering breadcrumbs with react-router 4.x", | ||
@@ -25,4 +25,4 @@ "repository": "icd2k3/react-router-breadcrumbs-hoc", | ||
| "babel-core": "^6.8.0", | ||
| "babel-eslint": "^8.2.1", | ||
| "babel-jest": "^22.0.6", | ||
| "babel-eslint": "^8.2.2", | ||
| "babel-jest": "^22.4.1", | ||
| "babel-plugin-external-helpers": "^6.22.0", | ||
@@ -34,12 +34,13 @@ "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0", | ||
| "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", | ||
| "eslint": "^4.15.0", | ||
| "eslint": "^4.18.1", | ||
| "eslint-config-airbnb": "^16.1.0", | ||
| "eslint-plugin-import": "^2.8.0", | ||
| "eslint-plugin-import": "^2.9.0", | ||
| "eslint-plugin-jsx-a11y": "^6.0.3", | ||
| "eslint-plugin-react": "^7.5.1", | ||
| "jest": "^22.0.6", | ||
| "prop-types": "^15.6.0", | ||
| "eslint-plugin-react": "^7.7.0", | ||
| "jest": "^22.4.2", | ||
| "prop-types": "^15.6.1", | ||
| "react": "^16.2.0", | ||
@@ -49,3 +50,3 @@ "react-dom": "^16.2.0", | ||
| "react-router-dom": "^4.2.2", | ||
| "rollup": "^0.55.1", | ||
| "rollup": "^0.56.3", | ||
| "rollup-plugin-babel": "^3.0.3", | ||
@@ -58,3 +59,3 @@ "rollup-plugin-commonjs": "^8.2.6", | ||
| "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", | ||
@@ -61,0 +62,0 @@ "lint": "eslint ./src/**" |
@@ -82,2 +82,5 @@ <h3 align="center"> | ||
| ## Already using a [route config](https://reacttraining.com/react-router/web/example/route-config) array with react-router? | ||
| Simple! Just add a `breadcrumbs` prop to your routes that require breadcrumbs. | ||
| ## API | ||
@@ -98,2 +101,11 @@ | ||
| // 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 | ||
@@ -103,3 +115,3 @@ | ||
| // 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> | ||
| ``` | ||
@@ -132,1 +144,25 @@ | ||
| 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! |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by0.7%
472377
- Lines of code
- increased by0.73%
686
- Number of lines in readme file
- increased by27.91%
165
Worsened metrics
- Dev dependency count
- increased by3.57%
29
- Number of package files
- decreased by-3.03%
32
No dependency changes