diff --git a/README.md b/README.md index 068868b..012e603 100644 --- a/README.md +++ b/README.md @@ -18,14 +18,16 @@ - [Description](#description) + - [Features](#features) - [Install](#install) - [Usage](#usage) - [Examples](#examples) - [Simple](#simple) - [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) - [API](#api) @@ -33,7 +35,12 @@ ## Description -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 @@ -41,7 +48,7 @@ Deconstruct a route and return matching breadcrumb components you can render how or -`npm install react-router-breadcrumbs-hoc --save` +`npm i react-router-breadcrumbs-hoc --save` ## Usage @@ -109,9 +116,9 @@ Pathname | Result /users/1 | Home / Users / John /example | Home / Custom Example -## 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 -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 in a single place! +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`. For example... @@ -142,23 +149,6 @@ then you can just pass the whole route config right into the hook: const breadcrumbs = useBreadcrumbs(routeConfig); ``` -## 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'] })` - - ## Dynamic breadcrumbs If you pass a component as the `breadcrumb` prop it will be injected with react-router's [match](https://reacttraining.com/react-router/web/api/match) and [location](https://reacttraining.com/react-router/web/api/location) objects as props. These objects contain ids, hashes, queries, etc from the route that will allow you to map back to whatever you want to display in the breadcrumb. @@ -180,6 +170,15 @@ export default connect(mapStateToProps)(PureUserBreadcrumb); // example.com/users/123 --> Home / Users / John ``` +Now we can pass this custom `redux` breadcrumb into the HOC: + +```js +withBreadcrumbs([{ + path: '/users/:id', + breadcrumb: UserBreadcrumb +}]); +``` + ---- Similarly, the [location](https://reacttraining.com/react-router/web/api/location) object could be useful for displaying dynamic breadcrumbs based on the route's state: @@ -199,6 +198,35 @@ const EditorBreadcrumb = ({ location: { state: { isNew } } }) => ( Add ``` +## Options + +An options object can be passed as the 2nd argument to the hook. + +```js +useBreadcrumbs(routes, options); +``` + +Option | Type | Description +--- | --- | --- +`disableDefaults` | `Boolean` | Disables all default generated breadcrumbs. | +`excludePaths` | `Array` | 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! Consider the following route configs: