# get-active-classes

> > Javascript conditional class utility

Latest version **0.0.11** (published 2019-11-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install get-active-classes
pnpm add get-active-classes
yarn add get-active-classes
bun add get-active-classes
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.11 |
| Published | 2019-11-27 |
| First published | 2019-11-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | samic8 |

## Links

- npm: https://www.npmjs.com/package/get-active-classes
- npm.io page: https://npm.io/package/get-active-classes

## Recent versions

- 0.0.11 (latest) — 2019-11-27
- 0.0.10 — 2019-11-24
- 0.0.9 — 2019-11-24
- 0.0.8 — 2019-11-24
- 0.0.7 — 2019-11-21
- 0.0.6 — 2019-11-21
- 0.0.5 — 2019-11-17
- 0.0.4 — 2019-11-17
- 0.0.3 — 2019-11-17

## README

## getActiveClasses ![Build Status](https://github.com/Samic8/get-active-classes/workflows/Tests/badge.svg)

> Javascript conditional class utility

### Installation

```
yarn add get-active-classes
```

### Usage

```js
// 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

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

the resulting HTML will be

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

Find detailed write up of the motivation behind this utility [on my blog](https://www.samdawson.dev/article/reacts-missing-conditional-class-utility).

---
_Source: https://npm.io/package/get-active-classes · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._