get-active-classes

getActiveClasses

Javascript conditional class utility

Installation

yarn add get-active-classes

Usage

// React functional component
import { getActiveClasses } from "get-active-classes";

const MenuItemFocus = ({
  orientation,
  forceActive,
  withTransition,
  className
}) => (
  <div
    className={getActiveClasses("menuItemFocus", className, {
      "menuItemFocus--vertical": orientation === "vertical",
      "menuItemFocus--horizontal": orientation === "horizontal",
      "menuItemFocus--active": forceActive,
      "menuItemFocus--withTransition": withTransition
    })}
  ></div>
);

So if the component had the props of

<MenuItemFocus
  orientation="vertical"
  forceActive={true}
  withTransition={false}
  className="widthFull"
/>

the resulting HTML will be

<div
  class="menuItemFocus widthFull menuItemFocus--vertical menuItemFocus--active"
></div>

Find detailed write up of the motivation behind this utility on my blog.