23
classcat Build a space-separated class attribute quickly
source link: https://github.com/jorgebucaran/classcat
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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 class="btn"> <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
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK