0.1.0 • Published 6 years ago
re-cx v0.1.0
re-cx
Classnames helper written in ReasonML
Example
open ReCx; /* for "namespace: true" in bsconfig.json */
let cssmodule = Js.Dict.fromList([("foo", "foo_123"), ("bar", "bar_456")]);
let cx = Cx.make(cssmodule);
Js.log(cx([LocalIf("foo", true), LocalIf("bar", false)]));
/* output: foo_123 */
Installation
yarn add re-cx
Then add re-cx
to bs-dependencies
in your bsconfig.json
:
{
...
"bs-dependencies": ["re-cx"]
}
Usage
Cx.join2(Global("foo"), GlobalIf("bar", false)); /* => "foo" */
make
This is for css-modules user. Just like classnames' bind version.
let cssmodule = Js.Dict.fromList([("foo", "foo_123"), ("bar", "bar_456")]);
let cx = Cx.make(cssmodule);
cx([Local("foo"), LocalIf("bar", false)]); /* => "foo_123" */
join
Cx.join(Local("foo")); /* => "foo" */
join2
Cx.join2(Local("foo"), LocalIf("bar", false)); /* => "foo" */
join3
Cx.join3(Local("foo"), LocalIf("bar", false), Local("baz")); /* => "foo baz" */
join4
Cx.join4(Local("foo"), LocalIf("bar", false), Local("baz"), Local("woo")); /* => "foo baz woo" */
joinMany
Cx.joinMany([Local("foo"), LocalIf("bar", false), Local("baz"), Local("woo")]); /* => "foo baz woo" */
Note
This library is inspired by https://github.com/alexfedoseev/re-classnames
0.1.0
6 years ago