stylelist

    1.0.12 • Public • Published

    stylelist

    A simple package that concatenates your css-classes, optionally with a condition.

    Usage

    This package was created to have a simplified syntax when using css-classes in JSX especially when they have conditions.

    Long, badly-readable style-attributes like

    <div className={"mr-5 nav-item " + (navItemActive ? " active " : "disabled")}>Hello!</div>

    become a little more readable:

    <div className={stylelist("nav-item", "mr-5", [navItemActive, "active"])}>Hello!</div>

    Documentation

    Default string-arguments

    Simple string-arguments are simply concatenated. In this reduced example, it may look useless - but you can combine all argument-types together!

    <div className={stylelist("text-center", "text-muted")}></div>

    Array-notation

    You can pass an array if you want to render css-classes conditionally. If the first element is true (or interpreted as true), the remaining array-elements will be added to the class-list.

    This seems to be a little surprising, but is a really lightweight syntax for usage in your JSX-code.

    <div className={stylelist("btn", [isDisabled, "btn-error"])}></div>
    <div className={stylelist("btn", [isDisabled, "btn-error", "cursor-disabled"])}></div>
    <div className={stylelist(
    		"btn",
    		[isDisabled, "btn-error", "cursor-disabled"],
    		[!isDisabled, "btn-success", "cursor-pointer"]
    	)}>

    Object-notation

    The object-notation is another way to render classes conditionally. You can pass an object as argument. If the value is true, the key is added to the class-list.

    <div className={stylelist("btn", { "active" : isActive })}></div>

    ... and why?

    To reduce all the hassle with concatenated classes and the spaces before and after every element.

    Install

    npm i stylelist

    DownloadsWeekly Downloads

    2

    Version

    1.0.12

    License

    MIT

    Unpacked Size

    5.22 kB

    Total Files

    4

    Last publish

    Collaborators

    • karsten.wtf