NavLink automatically toggles active based on current location

Author: tcbegley

package-lock.json

@@ -60,6 +60,7 @@
     "webpack-dev-server": "^3.11.0"
   },
   "dependencies": {
+    "@plotly/dash-component-plugins": "^1.2.0",
     "classnames": "^2.2.6",
     "fast-isnumeric": "^1.1.3",
     "is-absolute-url": "^2.1.0",

package.json

@@ -1,14 +1,16 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import PropTypes from 'prop-types';
 import {omit} from 'ramda';
 import classNames from 'classnames';
+import {History} from '@plotly/dash-component-plugins';
 import Link from '../../private/Link';
 
 /**
  * Add a link to a `Nav`. Can be used as a child of `NavItem` or of `Nav`
  * directly.
  */
 const NavLink = props => {
+  const [linkActive, setLinkActive] = useState(false);
   const {
     children,
     disabled,
@@ -17,9 +19,18 @@ const NavLink = props => {
     loading_state,
     setProps,
     n_clicks,
+    href,
     ...otherProps
   } = props;
 
+  const pathnameToActive = pathname => {
+    setLinkActive(
+      active === true ||
+        (active === 'exact' && pathname === href) ||
+        (active === 'partial' && pathname.startsWith(href))
+    );
+  };
+
   const incrementClicks = () => {
     if (!disabled && setProps) {
       setProps({
@@ -29,12 +40,24 @@ const NavLink = props => {
     }
   };
 
-  const classes = classNames(className, 'nav-link', {active, disabled});
+  useEffect(() => {
+    // get initial pathname
+    pathnameToActive(window.location.pathname);
+
+    // add event listener to update on change
+    History.onChange(() => pathnameToActive(window.location.pathname));
+  }, []);
+
+  const classes = classNames(className, 'nav-link', {
+    active: linkActive,
+    disabled
+  });
   return (
     <Link
       className={classes}
       disabled={disabled}
       preOnClick={incrementClicks}
+      href={href}
       {...omit(['n_clicks_timestamp'], otherProps)}
       data-dash-is-loading={
         (loading_state && loading_state.is_loading) || undefined
@@ -88,9 +111,20 @@ NavLink.propTypes = {
   href: PropTypes.string,
 
   /**
-   * Apply 'active' style to this component
+   * Apply 'active' style to this component. Set to "exact" to automatically
+   * toggle active status when pathname matches href, or to "partial" to
+   * automatically toggle on a partial match.
+   *
+   * For example
+   * - dbc.NavLink(..., href="/my-page", active="exact") will be active on
+   *   "/my-page" but not "/my-page/other" or "/random"
+   * - dbc.NavLink(..., href="/my-page", active="partial") will be active on
+   *   "/my-page" and "/my-page/other" but not "/random"
    */
-  active: PropTypes.bool,
+  active: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.oneOf(['partial', 'exact'])
+  ]),
 
   /**
    * Disable the link