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!