# combine-classes

> a helper for combining css classes and making conditional class logic easier to implement

Latest version **1.0.3** (published 2019-08-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install combine-classes
pnpm add combine-classes
yarn add combine-classes
bun add combine-classes
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2019-08-11 |
| First published | 2019-08-07 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | brooklin-jazz-myers |

## Links

- npm: https://www.npmjs.com/package/combine-classes
- Repository: https://github.com/BrooklinJazz/combine-classes
- Homepage: https://github.com/BrooklinJazz/combine-classes#readme
- Issues: https://github.com/BrooklinJazz/combine-classes/issues
- npm.io page: https://npm.io/package/combine-classes

## Recent versions

- 1.0.3 (latest) — 2019-08-11
- 1.0.2 — 2019-08-11
- 1.0.1 — 2019-08-07
- 1.0.0 — 2019-08-07

## README

# Combine Classes

concise syntax for combining classes with conditional logic in React.

- utilize conditional logic without ternary logic or if statements.
- combine multiple strings into a single string

# Installation

npm

```
$ npm install combine-classes
```

yarn

```
yarn add combine-classes
```

# Importing

First import `combineClasses` into the file you would like to use it using either named imports or default imports.

Named Imports

```ts
import { combineClasses } from "combine-classes";
```

Default Imports

```ts
import combineClasses from "combine-classes";
```

using require

```ts
const combineClasses = require("combine-classes");
```

# Examples

combining strings

```tsx
import combineClasses from "combine-classes";

const MyComponent = () => {
  return <div className={combineClasses("class1", "class2")} />;
};
```

conditonal logic

conditional logic should be passed in as an array of 2 elements, the first element should be a boolean and the second a string/

```ts
[boolean, string]; // i.e [true, "className"] or [false, "className"]
```

example with a component

```tsx
import combineClasses from "combine-classes";

const MyComponent = () => {
  const myConditionalLogic = Math.random() > 0.5;
  return (
    // "MyConditionalClass will be applied if myConditionalLogic === true"
    <div
      className={combineClasses("className", [
        myConditionalLogic,
        "MyConditionalClass"
      ])}
    />
  );
};
```

# Why use Combine Classes?

without combineClasses conditional class logic can become over-verbose and complicated. It's also easy to forget to put a space between classNames

using ternary

```tsx
const MyComponent = () => {
  const myConditionalLogic = Math.random() > 0.5;
  return (
    <div
      className={`className ${myConditionalLogic ? "MyConditionalClass" : ""}`}
    />
  );
};
```

using if logic

```tsx
const MyComponent = () => {
  const myConditionalLogic = Math.random() > 0.5;
  if (myConditionalLogic) {
    return <div className="classname MyConditionalClass" />;
  } else {
    return <div className="className" />;
  }
};
```

an exaggerated example

without `combineClasses`

```tsx
const MyComponent = () => {
  const myConditionalLogic1 = Math.random() > 0.5;
  const myConditionalLogic2 = Math.random() > 0.5;
  const myConditionalLogic3 = Math.random() > 0.5;
  const myConditionalLogic4 = Math.random() > 0.5;
  const myConditionalLogic5 = Math.random() > 0.5;

  return (
    <div
      // you also have to be very careful of space " " placement
      className={`className1 ${
        myConditionalLogic1 ? "ConditionalClass1" : ""
      } ${myConditionalLogic2 ? "ConditionalClass2" : ""} ${
        myConditionalLogic3 ? "ConditionalClass3" : ""
      } ${myConditionalLogic4 ? "ConditionalClass4" : ""} ${
        myConditionalLogic5 ? "ConditionalClass5" : ""
      }`}
    />
  );
};
```

with `combineClasses`

```tsx
import combineClasses from "combine-classes";

const MyComponent = () => {
  const myConditionalLogic1 = Math.random() > 0.5;
  const myConditionalLogic2 = Math.random() > 0.5;
  const myConditionalLogic3 = Math.random() > 0.5;
  const myConditionalLogic4 = Math.random() > 0.5;
  const myConditionalLogic5 = Math.random() > 0.5;
  return (
    <div
      className={
          combineClasses(
              "className",
              [myConditionalLogic1, "ConditionalClass1"]
              [myConditionalLogic2, "ConditionalClass2"]
              [myConditionalLogic3, "ConditionalClass3"]
              [myConditionalLogic4, "ConditionalClass4"]
              [myConditionalLogic5, "ConditionalClass5"]
              )
          }
    />
  );
};
```

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