https://github.com/shakacode/rescript-classnames

Reimplementation of classnames in ReScript
https://github.com/shakacode/rescript-classnames

Last synced: about 2 months ago
JSON representation

Reimplementation of classnames in ReScript

• Host: GitHub
• URL: https://github.com/shakacode/rescript-classnames
• Owner: shakacode
• License: mit
• Created: 2017-12-03T13:45:57.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2024-05-02T05:48:52.000Z (5 months ago)
• Last Synced: 2024-05-18T19:17:08.018Z (4 months ago)
• Language: ReScript
• Homepage:
• Size: 313 KB
• Stars: 110
• Watchers: 4
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: HISTORY.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - rescript-classnames

README

        
# rescript-classnames

[![version](https://img.shields.io/npm/v/rescript-classnames.svg?style=flat-square)](https://www.npmjs.com/package/rescript-classnames)

[![build](https://github.com/MinimaHQ/rescript-classnames/workflows/build/badge.svg)](https://github.com/MinimaHQ/rescript-classnames/actions?query=workflow%3Abuild)

[![license](https://img.shields.io/npm/l/rescript-classnames.svg?style=flat-square)](https://www.npmjs.com/package/rescript-classnames)

Reimplementation of [classnames](https://github.com/JedWatson/classnames) in [ReScript](https://rescript-lang.org).

> ### ShakaCode

> If you are looking for help with the development and optimization of your project, [ShakaCode](https://www.shakacode.com) 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](https://www.shakacode.com/career/)!

## Installation

```shell

# yarn

yarn add rescript-classnames

# or npm

npm install --save 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 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`.

```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`.

## License

See [LICENSE](./LICENSE).

## Supporters



  





  

    

    

    

  








  

    

    

    

  





  





  









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