https://github.com/seanmcp/class-list-builder

🏗 A simpler class list builder
https://github.com/seanmcp/class-list-builder

builder class-list class-list-builder class-name class-names classes

Last synced: 18 days ago
JSON representation

🏗 A simpler class list builder

• Host: GitHub
• URL: https://github.com/seanmcp/class-list-builder
• Owner: SeanMcP
• License: mit
• Created: 2019-07-15T10:47:35.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-11-25T21:52:25.000Z (about 5 years ago)
• Last Synced: 2024-04-27T10:21:47.820Z (8 months ago)
• Topics: builder, class-list, class-list-builder, class-name, class-names, classes
• Language: JavaScript
• Homepage:
• Size: 23.4 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Class List Builder

[![npm](https://img.shields.io/npm/v/class-list-builder.svg)](https://npmjs.com/package/class-list-builder) [![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/class-list-builder.svg)](https://npmjs.com/package/class-list-builder) [![npm](https://img.shields.io/npm/dt/class-list-builder.svg)](https://npmjs.com/package/class-list-builder)

🏗 A simpler class list builder

## Use

```js

classListBuilder('Build', 'class lists', true && 'without', 'fear')

// -> 'Build class lists without fear'

```

## Why

[Jed Watson's `classnames` library](https://github.com/JedWatson/classnames) is pretty much the industry standard for building a list of class names. Definitely check that out if you haven't already.

This library serves as an alternative with a simpler API for conditional classes. Instead of building dynamic keys on passed objects, you can use a simple `&&` binary to pass the class if the condition is `true`.

## Install

```sh

npm install class-list-builder

# or

yarn add class-list-builder

```

## API

Import or require the default function exported from `class-list-builder`, then call and pass the desired class names as arguments:

```js

classListBuilder('one', 2, 'three', 4)

// -> 'one 2 three 4'

```

Arguments at evaluate to `false` are removed from the output:

```js

classListBuilder(0, 'one', undefined, 'three')

// -> 'one three'

```

This means you can use conditions in the passed arguments to selectively add classes:

```js

let time = 1

classListBuilder('book', time < 1 && '--due')

// -> 'book'

time = 0

classListBuilder('book', time < 1 && '--due')

// -> 'book --due'

```

## Examples

### React

```jsx

import React from 'react'

import classListBuilder from 'class-list-builder'

export default function ToggleButton(props) {

    const [isOn, toggle] = useToggle() // A basic custom hook

    return (

        

            ToggleButton

        

    )

}

```

## LICENSE

[MIT](/LICENSE)