# generate-class-value

> A helper utility for generating css class name strings

Latest version **1.0.1** (published 2018-11-11) · GPL-3.0-or-later license · 0 weekly downloads

## Install

```sh
npm install generate-class-value
pnpm add generate-class-value
yarn add generate-class-value
bun add generate-class-value
```

## Health

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

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

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2018-11-11 |
| First published | 2018-11-11 |
| Weekly downloads | 0 |
| License | GPL-3.0-or-later |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 5.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Jan-Gerke Salomon |
| Maintainers | mohammer5 |

## Links

- npm: https://www.npmjs.com/package/generate-class-value
- Repository: https://github.com/Mohammer5/generate-class-value
- Homepage: https://github.com/Mohammer5/generate-class-value.git#readme
- Issues: https://github.com/Mohammer5/generate-class-value/issues
- npm.io page: https://npm.io/package/generate-class-value

## Dependencies (1)

- [lodash](https://npm.io/package/lodash.md) ^4.17.10

## Recent versions

- 1.0.1 (latest) — 2018-11-11

## README

# Generate Class Value

This package purpose's is to reduce the complexity of creating
dynamic class names. It's been used in a react environment so far
but works in any other environment as well.

## Usage

The following example demonstrates the use case within a react environment with TypeScript.
Of course it works in plain JavaScript as well.

```js
import * as React from 'react';
import { SFC } from 'react';
import { partial } from 'lodash/fp';
import { generateClassValue } from 'generate-class-value';

interface Props {
  color: string;
}

const conditions: Conditions<Props> = {
  'box__header': true,
  'box__header--green': ({ color }) => color === 'green',
  'box__header--black': ({ color }) => color === 'black',
};

// Reduces the cognitive load when reading the jsx code
const lazyClassValue = generateClassValue(conditions);

/**
 * <Box color="green" />
 *
 * will produce:
 *
 * <div class="box__header box__header--green"></div>
 **/
export const Box: SCF<Props> = props => (
  <div className={lazyClassValue(props)}>
    {/* ... */}
  </div>
);
```

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