NavLink: Add support for className and style props as functions (#7983)

Author: chaance

packages/react-router-dom/docs/api/NavLink.md

@@ -6,6 +6,23 @@ A special version of the [`<Link>`](Link.md) that will add styling attributes to
 <NavLink to="/about">About</NavLink>
 ```
 
+## className: string | func
+
+`className` can either be a string or a function that returns a string. If the function `className` is used, the link's `active` state is passed as a parameter. This is helpful if you want to exclusively apply a `className` to an inactive link.
+
+```jsx
+<NavLink
+  to="/faq"
+  className={isActive =>
+    "nav-link" + (!isActive ? " unselected" : "")
+  }
+>
+  FAQs
+</NavLink>
+```
+
+In React Router v6, `activeClassName` will be removed and you should use the function `className` to apply classnames to either active or inactive `NavLink` components.
+
 ## activeClassName: string
 
 The class to give the element when it is active. The default given class is `active`. This will be joined with the `className` prop.
@@ -16,6 +33,23 @@ The class to give the element when it is active. The default given class is `act
 </NavLink>
 ```
 
+## style: object | func
+
+`style` can either be a `React.CSSProperties` object or a function that returns a style object. If the function `style` is used, the link's `active` state is passed as a parameter.
+
+```jsx
+<NavLink
+  to="/faq"
+  style={isActive => ({
+    color: isActive ? "green" : "blue"
+  })}
+>
+  FAQs
+</NavLink>
+```
+
+In React Router v6, `activeStyle` will be removed and you should use the function `style` to apply inline styles to either active or inactive `NavLink` components.
+
 ## activeStyle: object
 
 The styles to apply to the element when it is active.

packages/react-router-dom/modules/NavLink.js

@@ -26,8 +26,8 @@ const NavLink = forwardRef(
   (
     {
       "aria-current": ariaCurrent = "page",
-      activeClassName = "active",
-      activeStyle,
+      activeClassName = "active", // TODO: deprecate
+      activeStyle, // TODO: deprecate
       className: classNameProp,
       exact,
       isActive: isActiveProp,
@@ -68,10 +68,18 @@ const NavLink = forwardRef(
             ? isActiveProp(match, currentLocation)
             : match);
 
-          const className = isActive
-            ? joinClassnames(classNameProp, activeClassName)
-            : classNameProp;
-          const style = isActive ? { ...styleProp, ...activeStyle } : styleProp;
+          let className =
+            typeof classNameProp === "function"
+              ? classNameProp(isActive)
+              : classNameProp;
+
+          let style =
+            typeof styleProp === "function" ? styleProp(isActive) : styleProp;
+
+          if (isActive) {
+            className = joinClassnames(className, activeClassName);
+            style = { ...style, ...activeStyle };
+          }
 
           const props = {
             "aria-current": (isActive && ariaCurrent) || null,
@@ -113,13 +121,13 @@ if (__DEV__) {
     "aria-current": ariaCurrentType,
     activeClassName: PropTypes.string,
     activeStyle: PropTypes.object,
-    className: PropTypes.string,
+    className: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     exact: PropTypes.bool,
     isActive: PropTypes.func,
     location: PropTypes.object,
     sensitive: PropTypes.bool,
     strict: PropTypes.bool,
-    style: PropTypes.object
+    style: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
   };
 }
 

packages/react-router-dom/modules/__tests__/NavLink-test.js

@@ -93,6 +93,43 @@ describe("A <NavLink>", () => {
       expect(a.style.color).toBe(activeStyle.color);
     });
 
+    it("applies its className when provided as a function", () => {
+      renderStrict(
+        <MemoryRouter initialEntries={["/pizza"]}>
+          <NavLink
+            to="/pizza"
+            className={isActive => (isActive ? "active-pizza" : "chill-pizza")}
+          >
+            Pizza!
+          </NavLink>
+        </MemoryRouter>,
+        node
+      );
+
+      const a = node.querySelector("a");
+      expect(a.className).toContain("active-pizza");
+    });
+
+    it("applies its style when provided as a function", () => {
+      const defaultStyle = { color: "black" };
+      const activeStyle = { color: "red" };
+
+      renderStrict(
+        <MemoryRouter initialEntries={["/pizza"]}>
+          <NavLink
+            to="/pizza"
+            style={isActive => (isActive ? activeStyle : defaultStyle)}
+          >
+            Pizza!
+          </NavLink>
+        </MemoryRouter>,
+        node
+      );
+
+      const a = node.querySelector("a");
+      expect(a.style.color).toBe(activeStyle.color);
+    });
+
     it("applies the default aria-current", () => {
       renderStrict(
         <MemoryRouter initialEntries={["/pizza"]}>
@@ -217,6 +254,43 @@ describe("A <NavLink>", () => {
       expect(a.style.color).toBe(defaultStyle.color);
     });
 
+    it("applies its className when provided as a function", () => {
+      renderStrict(
+        <MemoryRouter initialEntries={["/pizza"]}>
+          <NavLink
+            to="/salad"
+            className={isActive => (isActive ? "active-salad" : "chill-salad")}
+          >
+            Salad?
+          </NavLink>
+        </MemoryRouter>,
+        node
+      );
+
+      const a = node.querySelector("a");
+      expect(a.className).toContain("chill-salad");
+    });
+
+    it("applies its style when provided as a function", () => {
+      const defaultStyle = { color: "black" };
+      const activeStyle = { color: "red" };
+
+      renderStrict(
+        <MemoryRouter initialEntries={["/pizza"]}>
+          <NavLink
+            to="/salad"
+            style={isActive => (isActive ? activeStyle : defaultStyle)}
+          >
+            Salad?
+          </NavLink>
+        </MemoryRouter>,
+        node
+      );
+
+      const a = node.querySelector("a");
+      expect(a.style.color).toBe(defaultStyle.color);
+    });
+
     it("does not apply an aria-current value if no override value is given", () => {
       renderStrict(
         <MemoryRouter initialEntries={["/pizza"]}>