jihchi / re-cx

Classnames helper written in ReasonML

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