AutoBreadcrumb

Auto generate breadcrumb for React Router 4.xx

Install

Use yarn

$ yarn add auto-breadcrumb

Use npm

$ npm install auto-breadcrumb --save

Example

1. config example
2. online demo

Usage

import breadcrumbConfig from 'auto-breadcrumb';

const Breadcrumbs = breadcrumbConfig(config);

render(<Breadcrumbs pathname={location.pathname} />, MOUNT_DOM);

Api

1. The config

keyName | type | default | description --------|------|---------|----------- staticRoutesMap | Object | {'/':'Home'} | No params routes map to breadcrumb name dynamicRoutesMap | Object | {} | With params routes map to breadcrumb name homePath | String | / | The index path Breadcrumb | ReactComponent | ul | The Breadcrumb container BreadcrumbItem | ReactComponent | li | The Breadcrumb Item containerProps | Object | {} | The container props itemProps | Object | {} | The item props ~~LinkComponent~~ | ~~ReactComponent~~ | ~~Link~~ | ~~The Custom LinkComponent~~ use itemRender notFound | string | 404 NotFound | The custom notFound name itemRender | (name, path?) => ReactNode | - | You can custom everything for item display, if the param path is not given, you should render a text node(not clickable) isDisplayInHome| boolean| false | Is the Breadcrumb displayed on the home page

2. The Breadcrumbs Component props

propsName | type | isRequire | default | description ----------|------|-----------|---------|------------ pathname | String | Y | - | The full location path

License

MIT