rescript-classnames

Reimplementation of classnames in ReScript.

ShakaCode

If you are looking for help with the development and optimization of your project, ShakaCode can help you to take the reliability and performance of your app to the next level.

If you are a developer interested in working on ReScript / TypeScript / Rust / Ruby on Rails projects, we're hiring!

Installation

# yarn
yarn add rescript-classnames

# or npm
npm install --save rescript-classnames

Then add it to bsconfig.json:

"bs-dependencies": [
  "rescript-classnames"
]

API

You can use either Cn.make function:

Cn.make(["one", "two", "three"]) // => "one two three"

Or open Cx module and use cx alias:

open Cx

cx(["one", "two", "three"]) // => "one two three"

You can open Cx module globally via bsconfig.json and cx function will be available everywhere without a need to open Cx.

"bsc-flags": ["-open Cx"]

To conditionally render a classname, use an empty string to indicate an absence of it.

cx(["button", disabled ? "disabled" : ""])

Or use pattern matching to select the right classname for an input:

cx([
  "button",
  disabled ? "disabled" : "",
  switch color {
  | Green => "green"
  | Red => "red"
  },
])

Performance

First of all, if you are really concerned with performance, consider using string interpolation as it's the fastest possible way to render classnames.

`button ${disabled ? "disabled" : ""}`

Otherwise, rescript-classnames is reasonably fast.

js interpolation x 775,890,362 ops/sec ±1.46% (87 runs sampled)
rescript-classnames x 2,493,334 ops/sec ±0.64% (89 runs sampled)
classnames.js x 794,502 ops/sec ±0.62% (91 runs sampled)

License

See LICENSE.

Supporters

The following companies support our open source projects, and ShakaCode uses their products!