This package has been deprecated

Author message:

This package has moved to class-list-builder. Please uninstall @seanmcp/class-list and install class-list-builder instead, or use an older version of @seanmcp/class-list.

@seanmcp/class-list

1.1.0 • Public • Published

Class List

npm npm bundle size (minified) npm

🦆 A simpler class list builder

Use

classList('Build', 'class lists', true && 'without', 'fear')
// -> 'Build class lists without fear'

Why

Jed Watson's classnames library 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

npm install @seanmcp/class-list
# or
yarn add @seanmcp/class-list

API

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

classList('one', 2, 'three', 4)
// -> 'one 2 three 4'

Arguments at evaluate to false are removed from the output:

classList(0, 'one', undefined, 'three')
// -> 'one three'

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

let time = 1

classList('book', time < 1 && '--due')
// -> 'book'

time = 0

classList('book', time < 1 && '--due')
// -> 'book --due'

Examples

React

import React from 'react'
import classList from '@seanmcp/class-list'

export default function ToggleButton(props) {
    const [isOn, toggle] = useToggle() // A basic custom hook
    return (
        <button
            className={classList('ToggleButton', isOn && 'ToggleButton--on')}
            onClick={toggle}
            {...props}
        >
            ToggleButton
        </button>
    )
}

Package Sidebar

Install

npm i @seanmcp/class-list

Weekly Downloads

0

Version

1.1.0

License

MIT

Unpacked Size

4.28 kB

Total Files

4

Last publish

Collaborators

  • seanmcp