Namibian Pyjama Merchant

    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>
        )
    }

    Install

    npm i @seanmcp/class-list

    DownloadsWeekly Downloads

    0

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    4.28 kB

    Total Files

    4

    Last publish

    Collaborators

    • seanmcp