react-dynamic-breadcrumb

0.0.7 • Public • Published

React Dynamic Breadcrumb

react-dynamic-breadcumb helps to create breadcrumb dynamically independent to routes. It is quite simple and easy to use.

Simply wrap your code around <BreadProvider />, add <BreadCrumb /> where you want to dispaly breadcrumb and add <BreadcrumbItem /> in each page.

Demo

Click Here

Installation

$ npm install react-dynamic-breadcumb 

Usage

1. Wrap your code by provider

For example:

import { BreadProvider } from 'react-dynamic-breadcrumb';
import { BrowserRouter } from 'react-router-dom'; 
 
import "react-dynamic-breadcrumb/dist/index.css"; // or you can customize your own
 
ReactDOM.render(
<BrowserRouter> 
    <BreadProvider> // must be inside router
        <App />
    <BreadProvider/>
<BrowserRouter/>
, document.getElementById('root'));
2. Add BreadCrumb where you want to show your breadcrumb

For example in header:

import React from 'react';
import { Breadcrumb } from 'react-dynamic-breadcrumb';
 
export default function Header() {
    return (
            <Breadcrumb containerClassName="dynamic-bread-crumb" separator="<strong>/</strong>" />
 
    )
}
2. Add BreadcrumbItem in page

Add BreadcrumbItem to each page.

import React from 'react';
import { BreadcrumbItem } from 'react-dynamic-breadcrumb';
 
function Football() {
    return (
        <>
            <BreadcrumbItem to="/" >Home</BreadcrumbItem>
            <BreadcrumbItem to="/sports" >Sports</BreadcrumbItem>
            <BreadcrumbItem  >Football</BreadcrumbItem>
            This is Football page
        </>
    )
}
 
export default Football;

Props

Name Type Default Description
separator string / html element Required.
containerClassName string dynamic-bread-crumb wrapper class outside breadcrumb. (for CSS!!)

LICENSE

MIT

Package Sidebar

Install

npm i react-dynamic-breadcrumb

Weekly Downloads

1

Version

0.0.7

License

ISC

Unpacked Size

25.3 kB

Total Files

18

Last publish

Collaborators

  • saurssaurav