@hishprorg/consequuntur-accusamus
![npm downloads](https://img.shields.io/npm/dm/@hishprorg/consequuntur-accusamus.svg?style=flat-square)
className and styleName on steroids 💪
Usage
Allow you to write jsx classNames in a simpler way, without having to worry about importing a helper (like clsx or classnames). className
or styleName
attributes take any number of arguments which can be a string, an array or an object (if the value associated with a given key is falsy, that key won't be included in the output). See examples
Install
When @hishprorg/consequuntur-accusamus cannot resolve className
/ styleName
during compilation, it imports a helper function (read build time resolution). Therefore, you must install babel-plugin-react-css-modules as a direct dependency of the project.
$ npm install @hishprorg/consequuntur-accusamus --save
{
plugins: [
['transform-jsx-classnames', {
dedupe: false,
attributes: ['className', 'styleName']
}]
]
}
Note: ⚠️ If you're using babel-plugin-react-css-modules
, ensure you're adding transform-jsx-classnames
before
Build time resolution
The plugin will try to resolve the className
/ styleName
during the compilation (className={"foo", { active: true }}
) and fallback to runtime if not possible (className={_cx("bar", { disabled: props.disabled })}
- a tiny helper (256B minified) will be included automatically.
Runtime helper
The runtime helper is similar to the clsx package. See examples.
dedupe
Dedupe behaves like the classname dedupe version. Way faster though. Its speed is similar to classnames
in no dedupe version.
The only difference you'll find will be with full numeric classNames: output will always spit numbers first (ex: className={"a", 12}
=> className="12 a"
). It shouldn't be a big deal though, as using numeric values for classNames is pretty rare and order only matters in a very few specific cases.
Performance
See benchmark dir.
Examples
Build time
<div className={"foo", "bar"}>
→ <div className="foo bar"></div>
<div className={'foo', { bar: true }}>
→ <div className="foo bar"></div>
<div className={{ 'foo-bar': true }}>
→ <div className="foo-bar"></div>
<div className={{ 'foo-bar': false }}>
→ <div className=""></div>
<div className={{ foo: true }, { bar: true }, ["foobar", "duck"]}>
→ <div className="foo bar foobar duck"></div>
<div className={'foo', { bar: true, duck: false }, 'baz', { quux: true }}>
→ <div className="foo bar baz quux"></div>
<div styleName={"foo", "bar"}>
→ <div styleName="foo bar"></div>
<div className={'foo foo', 'bar', { bar: true, foo: false }}>
→ <div className="bar"></div>
<div className={props.active ? "foo" : "bar"}>
→ <div className={props.active ? "foo" : "bar"}></div>
Runtime
When className
/ styleName
can't be resolved at compilation.
<div className={"foo", { active: props.active }}>
→ <div className={_cx("foo", { active: props.active })}></div>
<div className={{ foo: true, [`btn-${props.type}`]: true }}>
→ <div className={_cx({ foo: true, [`btn-${props.type}`]: true })}></div>
<div className={"foo", props.active && getClassName()}>
→ <div className={_cx("foo", props.active && getClassName())}></div>
Send some love
You like this package?
![Buy me a coffee](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)