classnames

Haxe utility for conditionally joining classNames together.
https://github.com/kLabz/haxe-classnames

To install, run:

haxelib install classnames 0.1.2 

See using Haxelib in Haxelib documentation for more information.

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

Contributors
klabz
Version
0.1.2
Published
6 weeks ago
License
MIT

All libraries are free

Every month, more than thousand developers use haxelib to find, share, and reuse code — and assemble it in powerful new ways. Enjoy Haxe; It is great!

Explore Haxe

Haxe Manual

Haxe Code Cookbook

Haxe API documentation

You can try Haxe in the browser! try.haxe.org

Join us on Github!

Haxe is being developed on GitHub. Feel free to contribute or report issues to our projects.

Haxe on Github