React Auto Breadcrumbs

Installation:

npm install react-auto-breadcrumbs

or

yarn add react-auto-breadcrumbs

Usage :

You can use default components

import { BreadcrumbsProvider, Breadcrumbs, Breadcrumb } from 'react-auto-breadcrumbs';

const App = () => (
    <BreadcrumbsProvider>
        <MyApp />
    </BreadcrumbsProvider>
);

or create your own Breadcrumb components to use your own structure:

import createBreadcrumbComponents from 'react-auto-breadcrumbs';

interface MyCustomBreadcrumbStructure {
    label: string;
    path?: string;
    icon: string;
}

export const {
    BreadcrumbsProvider,
    BreadcrumbsContext,
    Breadcrumbs,
    useBreadcrumbs,
} = createBreadcrumbComponents<MyBreadcrumbObject>();

Wrap your app with BreadcrumbsProvider:

import { BreadcrumbsProvider } from 'react-auto-breadcrumbs';

const App = () => (
    <BreadcrumbsProvider>
        <MyApp />
    </BreadcrumbsProvider>
);

Use Breadcrumbs component to render breadcrumbs inside BreadcrumbsProvider:

import { Breadcrumbs } from 'react-auto-breadcrumbs';

const Layout = () => (
    <div>
        <Breadcrumbs render={(elements) => {
            return elements.map(element => (
                <a key={element.path} href={element.path}>{element.label}</a>
            ))
        }} />
        <MyPage />
    </div>
);

Alternatively you can use useBreadcrumbs hook to get breadcrumbs elements:

import { useBreadcrumbs } from 'react-auto-breadcrumbs';

const Layout = () => {
    const elements = useBreadcrumbs();
    
    return (
        <div>
            {elements.map(element => (
                <a key={element.path} href={element.path}>{element.label}</a>
            ))}
            <MyPage/>
        </div>
    )
}

Use Breadcrumb component to add breadcrumbs elements:

import {Breadcrumb} from 'react-auto-breadcrumbs';

const MyPage = () => (
    <Breadcrumb label="My page" path="/">
        <div>Home page</div>
        <Breadcrumb label="My page 1" path="/my-page-1">
            Page 1
        </Breadcrumb>
    </Breadcrumb>
);

Remember that next breadcrumb element must be a child of previous breadcrumb element.