# getclassname

> Simple function for managing css classes. It was made with react in mind. The function returns a string object so if you want the primitive value you have to call toString. You can safely pass the value to className prop in react.

Latest version **2.1.2** (published 2021-07-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install getclassname
pnpm add getclassname
yarn add getclassname
bun add getclassname
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.2 |
| Published | 2021-07-01 |
| First published | 2020-08-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | jkierem |

## Links

- npm: https://www.npmjs.com/package/getclassname
- Repository: https://github.com/Jkierem/getClassName
- npm.io page: https://npm.io/package/getclassname

## Recent versions

- 2.1.2 (latest) — 2021-07-01
- 2.1.1 — 2021-07-01
- 2.1.0 — 2021-07-01
- 2.0.0 — 2021-07-01
- 1.0.9 — 2020-10-07
- 1.0.8 — 2020-10-07
- 1.0.7 — 2020-10-07
- 1.0.6 — 2020-10-07
- 1.0.5 — 2020-10-07
- 1.0.4 — 2020-10-07
- 1.0.3 — 2020-10-07
- 1.0.2 — 2020-08-18
- 1.0.1 — 2020-08-18
- 1.0.0 — 2020-08-18

## README

# getClassName

Simple function for managing css classes. It was made with react in mind. The function returns a string object so if you want the primitive value you have to call toString. You can safely pass the value to className prop in react.

## Installation

```shell
yarn add getclassname
// or
npm install getclassname
```

## Usage

It is a function that returns a string with a couple more methods. The common use cases are as follows:

```javascript
import getClassName from 'getclassname';

const common = getClassName({
    "class1": true,
    "not-included": false,
    "class2": () => true
})

// common == "class1 class2"

const interpolation = getClassName({
    base: "base",
    "&--active": true,
})

// interpolation == "base base--active"

const extended = interpolation.extend("&__extended");

// extended == "base__extended"

const extra = interpolation.extend("&__extended").recompute({
    "&--active": false
})

// extra == "base__extended base__extended--active"

const changeInterpolationToken = getClassName({
    base: "base",
    token: "$",
    "$--different": true
})

// changeInterpolationToken == "base base--different"

// BEM Shorthands

const Block = getClassName({ base: "block" })

const Element = Block.element("element");

// Block.element("element") == Block.extend("&__element") == "block__element"

const Modifier = Block.modifier("modifier")

// Block.modifier("modifier") == Block.extend("&--modifier") == "block--modifier"
```

And that's all there is...

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