Skip to content
Javascript conditional class utility
TypeScript JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows
src Revert "Fix failing tests" Nov 24, 2019
.gitignore
.npmignore
README.md Fix badge url Nov 17, 2019
babel.config.js Revert "Use typescript compiler instead of babel" Nov 24, 2019
gulpfile.js
package.json Remove unused script Nov 27, 2019
yarn-error.log
yarn.lock

README.md

getActiveClasses Build Status

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.

You can’t perform that action at this time.