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.