15: Add support for dynamic page titles

dist/BreadcrumbsItem.js

@@ -29,7 +29,8 @@ var BreadcrumbsItem = function BreadcrumbsItem(props) {
   var _props$parentProps = props.parentProps,
       ActiveLinkComponent = _props$parentProps.ActiveLinkComponent,
       LinkComponent = _props$parentProps.LinkComponent,
-      routeMatcherRegex = _props$parentProps.routeMatcherRegex;
+      routeMatcherRegex = _props$parentProps.routeMatcherRegex,
+      titleFn = _props$parentProps.titleFn;
 
   var placeholderMatcher = /:[^\s/]+/g;
 
@@ -125,6 +126,8 @@ var BreadcrumbsItem = function BreadcrumbsItem(props) {
   var routeName = matchRouteName(match.url, mappedRoutes);
   if (routeName !== null) routeName = routeName || name;
 
+  if (titleFn && isDefined(routeName) && match.isExact) document.title = titleFn(routeName);
+
   if (isDefined(routeName)) return match.isExact ? _react2.default.createElement(
     ActiveLinkComponent,
     null,

dist/index.js

@@ -31,7 +31,8 @@ var BreadcrumbsWrapper = function BreadcrumbsWrapper(props) {
         ActiveLinkComponent: props.ActiveLinkComponent,
         LinkComponent: props.LinkComponent,
         rootName: props.rootName,
-        routeMatcherRegex: props.routeMatcherRegex
+        routeMatcherRegex: props.routeMatcherRegex,
+        titleFn: props.titleFn
       }, rest));
     }
   });
@@ -59,7 +60,8 @@ BreadcrumbsWrapper.defaultProps = {
       props.children
     );
   },
-  rootName: ''
+  rootName: '',
+  titleFn: undefined
 };
 
 BreadcrumbsWrapper.propTypes = {
@@ -68,7 +70,8 @@ BreadcrumbsWrapper.propTypes = {
   ActiveLinkComponent: _propTypes2.default.func,
   LinkComponent: _propTypes2.default.func,
   rootName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
-  routeMatcherRegex: _propTypes2.default.string
+  routeMatcherRegex: _propTypes2.default.string,
+  titleFn: _propTypes2.default.func
 };
 
 exports.default = BreadcrumbsWrapper;

src/BreadcrumbsItem.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 export const isDefined = v => (v !== undefined && v !== null && v !== false && String(v).length > 0);
 const BreadcrumbsItem = (props) => {
   const {match, name, mappedRoutes} = props;
-  const {ActiveLinkComponent, LinkComponent, routeMatcherRegex} = props.parentProps;
+  const {ActiveLinkComponent, LinkComponent, routeMatcherRegex, titleFn} = props.parentProps;
   const placeholderMatcher = /:[^\s/]+/g;
 
   const getPlaceholderVars = (url, key) => {
@@ -75,6 +75,9 @@ const BreadcrumbsItem = (props) => {
   if (routeName !== null)
     routeName = routeName || name;
 
+  if (titleFn && isDefined(routeName) && match.isExact)
+    document.title = titleFn(routeName);
+
   if (isDefined(routeName))
     return match.isExact
       ? <ActiveLinkComponent>{routeName}</ActiveLinkComponent>

src/index.js

@@ -13,6 +13,7 @@ const BreadcrumbsWrapper = (props) => {
              LinkComponent={props.LinkComponent}
              rootName={props.rootName}
              routeMatcherRegex={props.routeMatcherRegex}
+             titleFn={props.titleFn}
              {...rest}
            />}
     />
@@ -24,7 +25,8 @@ BreadcrumbsWrapper.defaultProps = {
   WrapperComponent: (props) => <ol className="breadcrumb" >{props.children}</ol>,
   ActiveLinkComponent: (props) => <li className="breadcrumb-item active" >{props.children}</li>,
   LinkComponent: (props) => <li className="breadcrumb-item">{props.children}</li>,
-  rootName:''
+  rootName:'',
+  titleFn: undefined,
 };
 
 BreadcrumbsWrapper.propTypes = {
@@ -34,6 +36,7 @@ BreadcrumbsWrapper.propTypes = {
   LinkComponent: PropTypes.func,
   rootName: PropTypes.oneOfType([PropTypes.string,PropTypes.func]),
   routeMatcherRegex: PropTypes.string,
+  titleFn: PropTypes.func,
 };
 
 export default BreadcrumbsWrapper;