classnames 0.1.1

Haxe utility for conditionally joining classNames together.

Released 2017-12-23.

To install, run:

haxelib install classnames 0.1.1

See using Haxelib in Haxelib documentation for more information.

Maintainerklabz
Websitehttps://github.com/kLabz/haxe-classnames
Current version0.1.1
StatisticsInstalled 10 times
LicenseMIT
Tags

README.md

Haxe classNames

Haxe utility for conditionally joining classNames together. Inspired by npm package classnames by JedWatson.

Getting Started

Installing

haxelib install classnames

Usage with React

Example usage with a react component:

class Bar extends ReactComponentOfProps<BarProps> {
	override public function render() {
		var classNames = ClassNames.fast(
			"base",
			props.className,
			{
				disabled: props.disabled,
				checked: !props.disabled && props.checked
			}
		);

		return jsx('<div className=$classNames />');
	}
}

Variant with fastAsObject() for destructuring props:

class Bar extends ReactComponentOfProps<BarProps> {
	override public function render() {
		var classes = ClassNames.fastAsObject(
			"base",
			props.className,
			{
				disabled: props.disabled,
				checked: !props.disabled && props.checked
			}
		);

		return jsx('<div {...classes} />');
	}
}

Usage:

// className="base myclass checked"
jsx('<$Bar className="myclass" checked=$true />');

// className="base myclass1 myclass2 disabled"
jsx('<$Bar className="myclass1 myclass2" disabled=$true />');

// className="base disabled"
jsx('<$Bar className="checked" disabled=$true />');

Simple use cases will be optimized at compile time:

var classNames = ClassNames.fast(
	"base",
	{
		disabled: props.disabled,
		checked: !props.disabled && props.checked
	}
);

// Will be transpiled to:
var classNames = "base" + (props.disabled?" disabled":"") + (!props.disabled && props.checked?" checked":"");

Or even be inlined:

var classNames = ClassNames.fast("btn", "btn--large");
var classNames = ClassNames.fast(["btn", "btn--large"]);
var classNames = ClassNames.fast({"btn": true, "btn--large": true});

// Will all be transpiled to:
var classNames = "btn btn--large";

Running the tests

To run all tests except React-related tests:

npm run test

To run all tests, including React-related tests:

npm run test:including-react

Future releases

There are still some features under way: Helpers for working with css modules (see bind() in classnames npm package) Helpers for working with BEM * Better compile-time error messages

License

This project is licensed under the MIT License - see the LICENSE file for details