Socket
Socket
Sign inDemoInstall

auto-breadcrumb

Package Overview
Dependencies
35
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    auto-breadcrumb

Auto generate breadcrumb for React-Router 4.xx


Version published
Maintainers
1
Install size
207 kB
Created

Readme

Source

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
keyNametypedefaultdescription
staticRoutesMapObject{'/':'Home'}No params routes map to breadcrumb name
dynamicRoutesMapObject{}With params routes map to breadcrumb name
homePathString/The index path
BreadcrumbReactComponentulThe Breadcrumb container
BreadcrumbItemReactComponentliThe Breadcrumb Item
containerPropsObject{}The container props
itemPropsObject{}The item props
LinkComponentReactComponentLinkThe Custom LinkComponent use itemRender
notFoundstring404 NotFoundThe 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)
isDisplayInHomebooleanfalseIs the Breadcrumb displayed on the home page
  1. The Breadcrumbs Component props
propsNametypeisRequiredefaultdescription
pathnameStringY-The full location path

License

MIT

Keywords

FAQs

Last updated on 02 Sep 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc