diff --git a/README.md b/README.md index 942b5e5..6435321 100644 --- a/README.md +++ b/README.md @@ -275,24 +275,28 @@ Now, `example.com/users/create` will display `create-breadcrumb` as expected, be ## API ```js -Route = { +BreadcrumbsRoute = { path: String breadcrumb?: React.ComponentType | React.ElementType | string | null - matchOptions?: { // see: https://reacttraining.com/react-router/web/api/matchPath + // see: https://reacttraining.com/react-router/web/api/matchPath + matchOptions?: { exact?: boolean strict?: boolean sensitive?: boolean } - routes?: BreadcrumbsRoute[] // optional nested routes (for react-router config compatibility) + // optional nested routes (for react-router config compatibility) + routes?: BreadcrumbsRoute[], + // optional props to be passed through directly to the breadcrumb component + props?: { [x: string]: unknown }; } Options = { - currentSection?: string + // disable all default generation of breadcrumbs disableDefaults?: boolean + // exclude certain paths fom generating breadcrumbs excludePaths?: string[] - pathSection?: string } // if routes are not passed, default breadcrumbs will be returned -useBreadcrumbs(routes?: Route[], options?: Options): Array +useBreadcrumbs(routes?: BreadcrumbsRoute[], options?: Options): Array ``` diff --git a/package.json b/package.json index 8059ffb..b201203 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "use-react-router-breadcrumbs", - "version": "1.0.5", + "version": "2.0.0", "description": "A hook for displaying and setting breadcrumbs for react router", "main": "dist/cjs/index.js", "module": "dist/es/index.js", diff --git a/src/index.test.js b/src/index.test.js index 4bbe2ad..4ea20fe 100644 --- a/src/index.test.js +++ b/src/index.test.js @@ -4,22 +4,27 @@ import React from 'react'; import PropTypes from 'prop-types'; import { mount } from 'enzyme'; import { MemoryRouter as Router } from 'react-router'; -import withBreadcrumbs, { getBreadcrumbs } from './index.tsx'; +import useBreadcrumbs, { getBreadcrumbs } from './index.tsx'; // imports to test compiled builds -import withBreadcrumbsCompiledES, { +import useBreadcrumbsCompiledES, { getBreadcrumbs as getBreadcrumbsCompiledES, } from '../dist/es/index'; -import withBreadcrumbsCompiledUMD, { +import useBreadcrumbsCompiledUMD, { getBreadcrumbs as getBreadcrumbsCompiledUMD, } from '../dist/umd/index'; -import withBreadcrumbsCompiledCJS, { +import useBreadcrumbsCompiledCJS, { getBreadcrumbs as getBreadcrumbsCompiledCJS, } from '../dist/cjs/index'; const components = { - Breadcrumbs: ({ useBreadcrumbs, options, routes, ...forwardedProps }) => { - const breadcrumbs = useBreadcrumbs(routes, options); + Breadcrumbs: ({ + useBreadcrumbs: useBreadcrumbsHook, + options, + routes, + ...forwardedProps + }) => { + const breadcrumbs = useBreadcrumbsHook(routes, options); return (

@@ -65,13 +70,13 @@ const components = { const getHOC = () => { switch (process.env.TEST_BUILD) { case 'cjs': - return withBreadcrumbsCompiledCJS; + return useBreadcrumbsCompiledCJS; case 'umd': - return withBreadcrumbsCompiledUMD; + return useBreadcrumbsCompiledUMD; case 'es': - return withBreadcrumbsCompiledES; + return useBreadcrumbsCompiledES; default: - return withBreadcrumbs; + return useBreadcrumbs; } }; @@ -89,12 +94,12 @@ const getMethod = () => { }; const render = ({ options, pathname, routes, state, props }) => { - const useBreadcrumbs = getHOC(); + const useBreadcrumbsHook = getHOC(); const { Breadcrumbs } = components; const wrapper = mount( { { path: '/one', breadcrumb: components.BreadcrumbExtraPropsTest, - foo: 'Pass through', - bar: ' props', + props: { + foo: 'Pass through', + bar: ' props', + }, }, ]; const { breadcrumbs } = render({ pathname: '/one', routes }); @@ -418,7 +425,7 @@ describe('use-react-router-breadcrumbs', () => { location: { pathname: '/1' }, }) ).toThrow( - 'withBreadcrumbs: `path` must be provided in every route object' + 'useBreadcrumbs: `path` must be provided in every route object' ); }); }); diff --git a/src/index.tsx b/src/index.tsx index 34d85d1..ea75e8b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -24,10 +24,8 @@ import { matchPath, useLocation } from 'react-router'; type Location = ReturnType; export interface Options { - currentSection?: string; disableDefaults?: boolean; excludePaths?: string[]; - pathSection?: string; } export interface MatchOptions { @@ -41,6 +39,7 @@ export interface BreadcrumbsRoute { breadcrumb?: React.ComponentType | React.ElementType | string | null; matchOptions?: MatchOptions; routes?: BreadcrumbsRoute[]; + props?: { [x: string]: unknown }; } export interface BreadcrumbData { @@ -72,13 +71,19 @@ const render = ({ breadcrumb: Breadcrumb, match, location, - ...rest + props, }: { breadcrumb: React.ComponentType | string; match: { url: string }; location: Location; + props?: { [x: string]: unknown }; }): BreadcrumbData => { - const componentProps = { match, location, key: match.url, ...rest }; + const componentProps = { + match, + location, + key: match.url, + ...(props || {}), + }; return { ...componentProps, @@ -156,7 +161,7 @@ const getBreadcrumbMatch = ({ ({ breadcrumb: userProvidedBreadcrumb, matchOptions, path, ...rest }) => { if (!path) { throw new Error( - 'withBreadcrumbs: `path` must be provided in every route object' + 'useBreadcrumbs: `path` must be provided in every route object' ); }