@ebroder/react-breadcrumbs-context

react-breadcrumbs-context

A lightweight, router agnostic implementation of breadcrumbs using the Context API introduced in React 16. Unlike other breadcrumb implementations, this module does not automatically render breadcrumbs for you, giving you the flexibility of rendering breadcrumbs for your app however you like.

Installation

npm i react-breadcrumbs-context

yarn add react-breadcrumbs-context

Usage

This module exposes a provider, consumer, and higher order component that can be used for managing breadcrumbs.

import {
  BreadcrumbsProvider,
  BreadcrumbsConsumer,
  withBreadcrumb
} from 'react-breadcrumb-context'

Components rendered using the withBreadcrumb higher order component within a BreadcrumbsProvider will register their breadcrumb with the provider upon render. Upon dismount, the component will deregister the crumb from the provider.

The BreadcrumbsConsumer can then be used to use the crumbs to render out the data needed.

Below is a basic example.

const crumb = { title: 'Page', path: '/' }

// upon render, this component will register crumb with
// the provider
const MyPage = withBreadCrumb(crumb)(() => <h1> Hello world! </h1>)

const App = () => (
  <BreadcrumbsProvider>
    <BreadcrumbsConsumer>
      {({ crumbs }) => {
        console.log('crumbs') // will output [ { title: 'Page', path: '/' } ]
        return <h1> First crumb title is {crumbs[0]} </h1>
      }}
    </BreadcrumbsConsumer>
    <MyPage />
  </BreadcrumbsProvider>
)

Typescript Support

This module exposes Typescript typings. If needed, you can get the Crumb type from this module.

import { Crumb } from 'react-breadcrumb-context'