
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
react-router-breadcrumbs-hoc
Advanced tools
Just a tiny, flexible, higher order component for rendering breadcrumbs with react-router 4.x
Just a tiny, flexible, higher order component for rendering breadcrumbs with react-router 4.x
site.com/user/id → user / John Doe
Deconstruct a route and return matching breadcrumb components you can render however you like. Render a simple string, a component that fetches a model in order to display the desired content, or just render something totally unrelated to the route.
We are currently using this method @ Koan Inc.
yarn add react-router-breadcrumbs-hoc
or
npm install react-router-breadcrumbs-hoc --save
withBreadcrumbs(routeConfigObject)(MyComponent);
import React from 'react';
import { NavLink } from 'react-router-dom';
import { withBreadcrumbs } from 'react-router-breadcrumbs-hoc';
const UserBreadcrumb = ({ match }) =>
<span>{match.params.userId}</span>; // use match param userId to fetch/display user name
const routes = [
{ path: '/', breadcrumb: 'Home' },
{ path: 'users', breadcrumb: 'Users' },
{ path: 'users/:userId', breadcrumb: UserBreadcrumb},
{ path: 'something-else', breadcrumb: ':)' },
];
const Breadcrumbs = ({ breadcrumbs }) => (
<div>
// map & render your breadcrumb components however you want
{breadcrumbs.map(({ breadcrumb, path, match }) => (
<span key={path}>
<NavLink to={match.url}>
{breadcrumb}
</NavLink>
<span>/</span>
</span>
))}
</div>
);
export default withBreadcrumbs(routes)(Breadcrumbs);
For the above example...
Pathname | Result |
---|---|
/users | Home / Users |
/users/id | Home / Users / John |
/something-else | Home / :) |
Route = {
path: String
breadcrumb: String|Function
matchOptions?: Object
}
Breadcrumb = {
path: String
match: String
breadcrumb: Component
}
withBreadcrumbs(routes: Array<Route>): HigherOrderComponent
getBreadcrumbs({ routes: Array<Route>, pathname: String }): Array<Breadcrumb>
FAQs
small, flexible, higher order component for rendering breadcrumbs with react-router 4.x
The npm package react-router-breadcrumbs-hoc receives a total of 18,689 weekly downloads. As such, react-router-breadcrumbs-hoc popularity was classified as popular.
We found that react-router-breadcrumbs-hoc demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.