feat: add support for React.memo wrapped components (#67)

* feat: add support for React.memo wrapped components

* chore: bump version

Author: icd2k3

.eslintrc

@@ -5,7 +5,9 @@
   "rules": {
     "object-curly-newline": 0,
     "react/destructuring-assignment": 0,
-    "react/jsx-one-expression-per-line": 0
+    "react/jsx-one-expression-per-line": 0,
+    "react/jsx-filename-extension": 0,
+    "react/no-multi-comp": 0
   },
   "globals": {
     "jest": "writeable"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-router-breadcrumbs-hoc",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "description": "Just a tiny, flexible, higher order component for rendering breadcrumbs with react-router 4.x",
   "repository": "icd2k3/react-router-breadcrumbs-hoc",
   "keywords": [
@@ -41,8 +41,8 @@
     "eslint-plugin-react": "^7.10.0",
     "jest": "^24.5.0",
     "prop-types": "^15.7.2",
-    "react": "16.8.4",
-    "react-dom": "16.8.4",
+    "react": "16.8.6",
+    "react-dom": "16.8.6",
     "react-router": "^5.0.0",
     "react-router-dom": "^5.0.0",
     "rollup": "^1.7.0",

src/index.js

@@ -18,7 +18,7 @@
  *
  */
 
-import { createElement } from 'react';
+import React, { createElement } from 'react';
 import { matchPath, withRouter } from 'react-router';
 
 const DEFAULT_MATCH_OPTIONS = { exact: true };
@@ -40,7 +40,7 @@ const humanize = str => str
  */
 const render = ({
   component: reactRouterConfigComponent,
-  breadcrumb,
+  breadcrumb: Breadcrumb,
   match,
   location,
   ...rest
@@ -49,9 +49,9 @@ const render = ({
 
   return {
     ...componentProps,
-    breadcrumb: typeof breadcrumb === 'function'
-      ? createElement(breadcrumb, componentProps)
-      : createElement('span', { key: componentProps.key }, breadcrumb),
+    breadcrumb: typeof Breadcrumb === 'string'
+      ? createElement('span', { key: componentProps.key }, Breadcrumb)
+      : <Breadcrumb {...componentProps} />,
   };
 };
 

src/index.test.js

@@ -30,6 +30,11 @@ const components = {
     </span>
   ),
   BreadcrumbExtraPropsTest: ({ foo, bar }) => <span>{foo}{bar}</span>,
+  BreadcrumbMemoized: React.memo(() => <span>Memoized</span>),
+  // eslint-disable-next-line react/prefer-stateless-function
+  BreadcrumbClass: class BreadcrumbClass extends React.PureComponent {
+    render() { return (<span>Class</span>); }
+  },
 };
 
 const getHOC = () => {
@@ -162,6 +167,20 @@ describe('react-router-breadcrumbs-hoc', () => {
     });
   });
 
+  describe('Different component types', () => {
+    it('Should render memoized components', () => {
+      const routes = [{ path: '/memo', breadcrumb: components.BreadcrumbMemoized }];
+      const { breadcrumbs } = render({ pathname: '/memo', routes });
+      expect(breadcrumbs).toBe('Home / Memoized');
+    });
+
+    it('Should render class components', () => {
+      const routes = [{ path: '/class', breadcrumb: components.BreadcrumbClass }];
+      const { breadcrumbs } = render({ pathname: '/class', routes });
+      expect(breadcrumbs).toBe('Home / Class');
+    });
+  });
+
   describe('Custom match options', () => {
     it('Should allow `strict` rule', () => {
       const routes = [

yarn.lock

@@ -4459,21 +4459,26 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-dom@16.8.4:
-  version "16.8.4"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.4.tgz#1061a8e01a2b3b0c8160037441c3bf00a0e3bc48"
-  integrity sha512-Ob2wK7XG2tUDt7ps7LtLzGYYB6DXMCLj0G5fO6WeEICtT4/HdpOi7W/xLzZnR6RCG1tYza60nMdqtxzA8FaPJQ==
+react-dom@16.8.6:
+  version "16.8.6"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f"
+  integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.13.4"
+    scheduler "^0.13.6"
 
-react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
+react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.4:
   version "16.8.4"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2"
   integrity sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA==
 
+react-is@^16.8.1:
+  version "16.8.6"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
+  integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
+
 react-router-dom@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.0.0.tgz#542a9b86af269a37f0b87218c4c25ea8dcf0c073"
@@ -4513,15 +4518,15 @@ react-test-renderer@^16.0.0-0:
     react-is "^16.8.4"
     scheduler "^0.13.4"
 
-react@16.8.4:
-  version "16.8.4"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.8.4.tgz#fdf7bd9ae53f03a9c4cd1a371432c206be1c4768"
-  integrity sha512-0GQ6gFXfUH7aZcjGVymlPOASTuSjlQL4ZtVC5YKH+3JL6bBLCVO21DknzmaPlI90LN253ojj02nsapy+j7wIjg==
+react@16.8.6:
+  version "16.8.6"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
+  integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.13.4"
+    scheduler "^0.13.6"
 
 read-pkg-up@^2.0.0:
   version "2.0.0"
@@ -4895,10 +4900,10 @@ sax@^1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@^0.13.4:
-  version "0.13.4"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.4.tgz#8fef05e7a3580c76c0364d2df5e550e4c9140298"
-  integrity sha512-cvSOlRPxOHs5dAhP9yiS/6IDmVAVxmk33f0CtTJRkmUWcb1Us+t7b1wqdzoC0REw2muC9V5f1L/w5R5uKGaepA==
+scheduler@^0.13.4, scheduler@^0.13.6:
+  version "0.13.6"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889"
+  integrity sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"