stitch-ui/src/core/components/NavItem.js

// TODO proptypes
/* eslint-disable react/prop-types */
import React from "react";
import { withRouter, NavLink } from "react-router-dom";
import classNames from "classnames";

function NavItem(props) {
  const {
    onlyActiveOnIndex,
    to,
    router,
    linkClassName,
    activeLinkClassName
  } = props;

  const isActive = router && router.isActive(to, onlyActiveOnIndex);
  const activeClassName = props.activeClassName || "active";

  const propsCopy = Object.assign({}, props);
  delete propsCopy.router;
  delete propsCopy.className;
  delete propsCopy.linkClassName;
  delete propsCopy.activeLinkClassName;

  propsCopy.className = classNames(linkClassName || "", {
    [activeLinkClassName || ""]: isActive
  });

  return (
    <li className={`${props.className} ${isActive ? activeClassName : ""}`}>
      <NavLink {...propsCopy}>
        {props.children}
      </NavLink>
    </li>
  );
}

export default withRouter(NavItem);