Readme updates

README.md

@@ -17,6 +17,22 @@
   <a href="https://codeclimate.com/github/icd2k3/react-router-breadcrumbs-hoc/maintainability"><img src="https://api.codeclimate.com/v1/badges/9f4bd022e2a21f40fc3a/maintainability" /></a>
 </p>
 
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [Description](#description)
+- [Install](#install)
+- [Usage](#usage)
+- [Examples](#examples)
+- [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)
+- [Dynamic breadcrumbs](#dynamic-breadcrumbs)
+- [Order matters!](#order-matters)
+- [API](#api)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
 ## 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.
@@ -35,22 +51,34 @@ or
 withBreadcrumbs()(MyComponent);
 ```
 
-## Example
+## Examples
 
+Start seeing generated breadcrumbs right away with this simple example
 ```js
-import React from 'react';
-import { NavLink } from 'react-router-dom';
 import withBreadcrumbs from 'react-router-breadcrumbs-hoc';
 
-// breadcrumbs can be any type of component OR string. This userId
-// could be used to fetch & display the user's name, for example
-const UserBreadcrumb = ({ match }) => (
-  <span>{match.params.userId}</span>
+const Breadcrumbs = ({ breadcrumbs }) => (
+  <React.Fragment>
+    {breadcrumbs.map(({ breadcrumb }) => breadcrumb)}
+  </React.Fragment>
+)
+
+export default withBreadcrumbs()(Breadcrumbs);
+```
+
+This will work for some routes, but you may want other routes to be dynamic (such as a user name breadcrumb). Let's modify the above example to handle custom-set breadcrumbs.
+
+```js
+import withBreadcrumbs from 'react-router-breadcrumbs-hoc';
+
+const userNamesById = { '1': 'John' }
+
+const DynamicUserBreadcrumb = ({ match }) => (
+  <span>{userNamesById[match.params.userId]}</span>
 );
 
-// define some custom breadcrumbs for certain routes (optional)
 const routes = [
-  { path: '/users/:userId', breadcrumb: UserBreadcrumb },
+  { path: '/users/:userId', breadcrumb: DynamicUserBreadcrumb },
   { path: '/example', breadcrumb: 'Custom Example' },
 ];
 
@@ -61,7 +89,7 @@ const Breadcrumbs = ({ breadcrumbs }) => (
       match,
       breadcrumb
       // other props are available during render, such as `location` 
-      // and any props found in your route objects will be included too
+      // and any props found in your route objects will be passed through too
     }) => (
       <span key={match.url}>
         <NavLink to={match.url}>{breadcrumb}</NavLink>
@@ -78,15 +106,34 @@ For the above example...
 Pathname | Result
 --- | ---
 /users | Home / Users
-/users/id | Home / Users / John
+/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?
 
 Just add a `breadcrumb` prop to your routes that require custom breadcrumbs.
 
+`{ path, component }` -> `{ path, component, breadcrumb }`
+
 `withBreadcrumbs(routeConfig)(MyComponent)`
 
+## Disabling default generated breadcrumbs
+
+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:** 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.
@@ -127,22 +174,6 @@ const EditorBreadcrumb = ({ location: { state: { isNew } } }) => (
 <Link to={{ pathname: '/editor', state: { isNew: true } }}>Add</Link>
 ```
 
-## Disabling default breadcrumbs for paths
-
-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:** 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: