1.1.4 • Published 5 years ago

react-breadcrumbs-light v1.1.4

Weekly downloads
34
License
MIT
Repository
github
Last release
5 years ago

React Breadcrumbs Light

GitHub version npm version GitHub demo GitHub license

Demo

See demo here

Description

Easy to use breadcrumbs for React.

The package includes:

  • Service: just call it in some root component and it will be returning current breadcrumbs array
  • Breadcrumbs component: just import and use it. Could be manually configured and styled
  • TS Types for both

Installation

npm i react-breadcrumbs-light

Breadcrumbs service

Provides function getBreadcrumbs, which returns an array of breadcrumbs.

Example (Argument Routes is specified in next subsection):

// Usage
const crumbs = getBreadcrumbs(Routes, window.location.pathname);

// Returned array
[
  { link: '/', title: 'Home', icon: 'any icon: string | html | component' },
  { link: '/clients', title: 'Clients', icon: '...' },
  { link: '/clients/1', title: 'Client № - 1, welcome!', icon: '...' }
]

There are 2 required arguments and 2 optional:

TitleTypeDescriptionDefault
routes *arrayarray of route objects (see example below)-
fullUrl *stringcurrent location full path (see example below)-
notFoundTitlestringtitle for not found route'Page Not Found'
notFoundIconanyicon for not found routeundefined

Routes

Example:

const Routes = [
  { title: 'Home', link: '/', icon: 'any icon: string | html | svg | component' },
  { title: 'Clients', link: '/clients', icon: '...', children: [
    { title: 'Client № - ', suffix: ', welcome!', link: '/clients/:id', icon: '...' },
    { title: 'Settings', link: '/clients/settings', icon: '...' }
  ] }
];

Fields:

TitleTypeDescription
link *stringbreadcrumb link
titlestringbreadcrumb title
suffixstringbreadcrumb suffix (added at the end of output breadcrumb title)
iconanybreadcrumb icon
childrenarrayarray of objects, similar to Routes, for nested routes

Features:

  • If title is not provided, link will be used as breadcrumb title (First letter uppercased)
  • For root route ('' or '/') if title not provided, the crumb title will be 'Root' by default
  • link field may contain dynamic routes (ex.: '/route/:id', just as react-router)
  • For dynamic routes 'title' field will be used as prefix for current pathname (first letter uppercased), if provided

FullUrl

It should be a current location, for ex.:

  • window.location.pathname
  • If using withRouter HOC of react-router-dom: location.pathname prop

Important

Do not forget to wrap Component, where you are using getBreadcrumbs function into withRouter() HOC, provided by react-router-dom. It is necessary to provide for your breadcrumbs Component updated current location, when route changes.

Example (Play with example here):

import { getBreadcrumbs } from 'react-breadcrumbs-light';
import { withRouter } from 'react-router-dom';

const CustomCrumbs = ({ location }) => {
  // Get current breadcrumbs
  const crumbs = getBreadcrumbs(Routes, window.location.pathname);

  // Render
  return (
    <ul>
      {crumbs.map((item, i, arr) => i !== arr.length - 1
        ? (
            <li key={i}>
              <Link to={item.link}>{item.title}</Link>
            </li>
          )
        : <li key={i}>{item.title}</li>)}
    </ul>
  );
};

const RoutedCustomCrumbs = withRouter(CustomCrumbs);

Breadcrumbs component

Provides a ready to use component. Can be styled and configured.

Play with example here.

<Breadcrumbs routes={Routes} />

There is only 1 required argument. And bunch of optional:

TitleTypeDescriptionDefault
routes *arrayarray of route objects (see example above)-
separatoranyseparator for crumbs/
iconsbooleanwhether to show iconstrue
titlesbooleanwhether to show titlestrue
noTitlesOnMobilebooleanif true - hide titles when device width <= 600px (do not forget to provide icons in such case)false
notFoundTitlestringtitle for not found pages'Page Not Found'
notFoundIconanyicon for not found pagesundefined
customClassesobjectclasses for each element of Breadcrumbs component-

Similar to first required argument for Breadcrumbs service - Routes array.

customClasses

TitleTypeDescriptionHtml Element
rootstringclass for root elementnav
liststringclass for list elementul
linkstringclass for link elementa
currentLinkstringclass for currentLink elementli
iconstringclass for icon elementspan (holder for icon)
titlestringclass for title elementspan
separatorstringclass for separator elementli (holder for separator)

License

This project is licensed under the terms of the MIT license.

1.1.4

5 years ago

1.1.3

5 years ago

1.1.2

5 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago