How to use react-router-breadcrumbs-hoc - 5 common examples

To help you get started, we’ve selected a few react-router-breadcrumbs-hoc examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github icd2k3 / react-router-breadcrumbs-hoc / types / react-router-breadcrumbs-hoc / react-router-breadcrumbs-hoc-tests.tsx View on Github external
matchOptions: { exact: true, strict: true },
  },
];

const Breadcrumbs = ({ breadcrumbs }: InjectedProps) => (
  <div>
    {breadcrumbs.map(({ breadcrumb, match }: BreadcrumbsProps, index: number) => (
      <span key={match.url}>
        <NavLink to={match.url}>{breadcrumb}</NavLink>
        {index < breadcrumbs.length - 1 && <i> / </i>}
      </span>
    ))}
  </div>
);

export default withBreadcrumbs(routes)(Breadcrumbs);
github ONEARMY / community-platform / src / pages / common / Header / CommunityHeader / Breadcrumb / Breadcrumb.tsx View on Github external
{breadcrumbs.map(({ match, breadcrumb }, index) => (
      <span key={match.url}>
        {index > 0 ? ' > ' : null}
        {index < breadcrumbs.length - 1 ? (
          <Link to={match.url} color={'black'}>
            {breadcrumb}
          </Link>
        ) : (
          <> {breadcrumb} </>
        )}
      </span>
    ))}
  </div>
)

export default withBreadcrumbs(routes, { disableDefaults: true })(Breadcrumbs)
github nos / client / src / components / AuthenticatedLayout / Breadcrumbs / index.js View on Github external
import withBreadcrumbs from 'react-router-breadcrumbs-hoc';

import Breadcrumbs from './Breadcrumbs';
import BrowserBreadcrumb from './BrowserBreadcrumb';

const routes = [
  { path: '/browser/:query+', breadcrumb: BrowserBreadcrumb }
];

export default withBreadcrumbs(routes, { excludePaths: ['/'] })(Breadcrumbs);
github iotexproject / iotex-explorer / src / shared / common / navigation.tsx View on Github external
export const Navigation = ({
  routes
}: {
  routes?: Array<BreadcrumbsRoute>;
}) => {
  const newRoutes = [...routesConfig, ...(routes || [])];
  const breadcrumbs = withBreadcrumbs(newRoutes, {
    excludePaths: ["/"]
  })(({ breadcrumbs }) => {
    return (
      <div style={{ padding: "20px 0", fontSize: "1em" }}>
        {breadcrumbs.map(({ match, breadcrumb }, index) => (
          <span key={match.url}>
            <NavLink to={match.url} className={getStyleClass(index)}>
              {index !== 0 && ` > `} {breadcrumb}
            </NavLink>
          </span>
        ))}
      </div>
    );
  });
  return React.createElement(breadcrumbs);
};
github elastic / kibana / x-pack / plugins / apm / public / components / app / Main / Breadcrumbs.js View on Github external
{breadcrumb}
                </a>
              )}
            </div>
          );
        })}
      </div>
    );
  }
}

const flatRoutes = flatten(
  routes.map(route => (route.switch ? route.routes : route))
);

export default withBreadcrumbs(flatRoutes)(Breadcrumbs);

react-router-breadcrumbs-hoc

small, flexible, higher order component for rendering breadcrumbs with react-router 4.x

MIT
Latest version published 1 year ago

Package Health Score

57 / 100
Full package analysis