Add a default formatter option (#43)

* add a default formatter option

* update default humanize function

* add test case

* version bump

Author: codytooker

package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-react-router-breadcrumbs",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "description": "A hook for displaying and setting breadcrumbs for react router",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",

src/index.test.js

@@ -529,6 +529,23 @@ describe('use-react-router-breadcrumbs', () => {
         expect(breadcrumbs).toBe('One');
       });
     });
+
+    describe('defaultFormatter', () => {
+      it('should be used if a breadcrumb is not provided for a specific path', () => {
+        const routes = [
+          { path: '/one', breadcrumb: 'One' },
+          { path: '/one/two' },
+          { path: '/one/two/three_four' },
+        ];
+        const { breadcrumbs } = render({
+          pathname: '/one/two/three_four',
+          routes,
+          options: { defaultFormatter: (breadcrumb) => breadcrumb.replace(/two/g, 'changed') },
+        });
+
+        expect(breadcrumbs).toBe('Home / One / changed / three_four');
+      });
+    });
   });
 
   describe('Invalid route object', () => {

src/index.tsx

@@ -31,6 +31,7 @@ type Location = ReturnType<typeof useLocation>;
 export interface Options {
   disableDefaults?: boolean;
   excludePaths?: string[];
+  defaultFormatter?: (str: string) => string
 }
 
 export interface BreadcrumbMatch<ParamKey extends string = string> {
@@ -197,9 +198,9 @@ const NO_BREADCRUMB = Symbol('NO_BREADCRUMB');
  * we used to use the humanize-string package, but it added a lot of bundle
  * size and issues with compilation. This 4-liner seems to cover most cases.
  */
-const humanize = (str: string): string => str
+export const humanize = (str: string): string => str
   .replace(/^[\s_]+|[\s_]+$/g, '')
-  .replace(/[_\s]+/g, ' ')
+  .replace(/[-_\s]+/g, ' ')
   .replace(/^[a-z]/, (m) => m.toUpperCase());
 
 /**
@@ -242,10 +243,12 @@ const getDefaultBreadcrumb = ({
   currentSection,
   location,
   pathSection,
+  defaultFormatter,
 }: {
   currentSection: string;
   location: Location;
   pathSection: string;
+  defaultFormatter?: (str: string) => string
 }): BreadcrumbData => {
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const match = matchPath(
@@ -257,7 +260,7 @@ const getDefaultBreadcrumb = ({
   )!;
 
   return render({
-    breadcrumb: humanize(currentSection),
+    breadcrumb: defaultFormatter ? defaultFormatter(currentSection) : humanize(currentSection),
     match,
     location,
   });
@@ -271,13 +274,15 @@ const getBreadcrumbMatch = ({
   currentSection,
   disableDefaults,
   excludePaths,
+  defaultFormatter,
   location,
   pathSection,
   branches,
 }: {
   currentSection: string;
   disableDefaults?: boolean;
   excludePaths?: string[];
+  defaultFormatter?: (str: string) => string
   location: Location;
   pathSection: string;
   branches: BreadcrumbsRouteBranch[];
@@ -342,7 +347,8 @@ const getBreadcrumbMatch = ({
         // Although we have a match, the user may be passing their react-router config object
         // which we support. The route config object may not have a `breadcrumb` param specified.
         // If this is the case, we should provide a default via `humanize`.
-        breadcrumb: userProvidedBreadcrumb || humanize(currentSection),
+        breadcrumb: userProvidedBreadcrumb
+        || (defaultFormatter ? defaultFormatter(currentSection) : humanize(currentSection)),
         match: { ...match, route },
         location,
         props,
@@ -368,6 +374,7 @@ const getBreadcrumbMatch = ({
     // include a "Home" breadcrumb by default (can be overrode or disabled in config).
     currentSection: pathSection === '/' ? 'Home' : currentSection,
     location,
+    defaultFormatter,
   });
 };