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

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

码农书籍

互联网思维独孤九剑

赵大伟 / 机械工业出版社 / 2014-3-20 / 49

《互联网思维独孤九剑》是国内第一部系统阐述互联网思维的著作，用9大互联网思维：用户思维、简约思维、极致思维、迭代思维、流量思维、社会化思维、大数据思维、平台思维、跨界思维，以专业的视角全方位解读移动互联网给传统产业带来的变革，涉及战略规划、商业模式设计、品牌建设、产品研发、营销推广、组织转型、文化变革等企业经营价值链条的各个方面。这是一部传统企业互联网转型必读的“孙子兵法”，帮助我们开启对新商业文......一起来看看《互联网思维独孤九剑》这本书的介绍吧!

码农工具