classcat Build a space-separated class attribute quickly

栏目: IT技术 · 发布时间: 5年前

内容简介：Build a space-separatedDon't want to set up a build step? Import it inside aClasscat takes an array of strings or name-value object and joins all the

Classcat

Build a space-separated class attribute quickly.

Easily add and remove class names based on a truthy or falsy value.
Works best when paired with a view framework. which will it be?
Ridiculously tiny at 260B . No dependencies.

Quickstart

npm i classcat

Don't want to set up a build step? Import it inside a <script> tag as a module. Don't worry; modules are supported in all evergreen, self-updating desktop, and mobile browsers.

<script type="module">
  import cc from "https://unpkg.com/classcat"
</script>

Classcat takes an array of strings or name-value object and joins all the truthy values into a space-separated string. Arrays may be nested too. That's really all there is to it. Here's the first example to get you started.

import cc from "classcat"

export const ToggleButton = ({ isOn }) => (
  <div>
    <div
      class={cc({
        circle: true,
        off: !isOn,
        on: isOn,
      })}
    />
    <span class={cc({ textOff: !isOn })}>{isOn ? "ON" : "OFF"}</span>
  </div>
)

API

`cc(string | number | object | array)`

import cc from "classcat"

cc("foo") //=> "foo"

cc(["foo", "bar", "baz"]) //=> "foo bar baz"

cc({ foo: false, bar: null, baz: undefined }) //=> ""

cc({ foo: true, bar: false, baz: true }) //=> "foo baz"

cc([{ foo: true, bar: false }, "baz"]) //=> "foo baz"

Run the benchmarks

npm run build && npm i -C bench && npm -C bench start

# Strings
classcat × 15,927,163 ops/sec
classnames × 2,694,533 ops/sec
clsx × 8,542,847 ops/sec

# Objects
classcat × 15,205,051 ops/sec
classnames × 2,873,497 ops/sec
clsx × 8,806,231 ops/sec

# Strings/Objects
classcat × 13,834,475 ops/sec
classnames × 3,013,424 ops/sec
clsx × 5,890,821 ops/sec

# Arrays
classcat × 3,649,723 ops/sec
classnames × 709,177 ops/sec
clsx × 2,513,014 ops/sec

# Arrays/Objects
classcat × 4,290,009 ops/sec
classnames × 1,856,967 ops/sec
clsx × 3,099,573 ops/sec

# Arguments vs Array
classcat × 3,089,353 ops/sec
classnames × 828,906 ops/sec
clsx × 3,057,879 ops/sec

License

MIT

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

classcat Build a space-separated class attribute quickly

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Data Mining

Jiawei Han、Micheline Kamber、Jian Pei / Morgan Kaufmann / 2011-7-6 / USD 74.95

The increasing volume of data in modern business and science calls for more complex and sophisticated tools. Although advances in data mining technology have made extensive data collection much easier......一起来看看《Data Mining》这本书的介绍吧!

码农工具