Reimplementation of classnames in ReScript
npm install 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!
``shellyarn
yarn add rescript-classnames
Then add it to
rescript.json:`json
"bs-dependencies": [
"rescript-classnames"
]
`API
You can use either Cn.make function:`rescript
Cn.make(["one", "two", "three"]) // => "one two three"
`Or open
Cx module and use cx alias:`rescript
open Cxcx(["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.`json
"bsc-flags": ["-open Cx"]
`To conditionally render a classname, use an empty string to indicate an absence of it.
`rescript
cx(["button", disabled ? "disabled" : ""])
`Or use pattern matching to select the right classname for an input:
`rescript
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.`rescript
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)
`P.S. To run benchmarks, change
package-specs.module to commonjs in rescript.json`.The following companies support our open source projects, and ShakaCode uses their products!