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 "base", props { disabled: props checked: !props&& props } ); return jsx('<div className=$classNames />'); }}
Variant with fastAsObject()
for destructuring props:
class Bar extends ReactComponentOfProps<BarProps> { override public function render() { var classes = ClassNames "base", props { disabled: props checked: !props&& props } ); 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 "base", { disabled: props checked: !props&& props }); // Will be transpiled to:var classNames = "base" ++ (!props&& props
Or even be inlined:
var classNames = ClassNames"btn--large");var classNames = ClassNames"btn--large"]);var classNames = ClassNamestrue, "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