Skip to content

likun7981/auto-breadcrumb

Repository files navigation

AutoBreadcrumb

Auto generate breadcrumb for React Router 4.xx

Build Status npm package

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
  1. The Breadcrumbs Component props
propsName type isRequire default description
pathname String Y - The full location path

License

MIT