easy-css-classes
v1.0.7
Published
Easier dynamic css class handling
Downloads
20
Readme
Easy CSS Classes
Dynamic CSS classes in javascript often involves ugly string manipulations, and the odd accidental "undefined" class name.
There is an easier way.
Installation
npm i -D easy-css-classes
Basic Usage
import React from "react";
import { cssClasses } from "easy-css-classes";
export example = () => (
<div className={cssClasses("my-class", "my-class-2")}>
Example
</div>
);
CSS Modules
import React from "react";
import { useCssModule } from "easy-css-classes";
import styles from "./styles.css";
const moduleClasses = useCssModule(styles);
export example = () => (
<div className={moduleClasses("my-class", "my-class-2")}>
Example
</div>
);
Methods
Plus
// classes = "class-1 class2"
const classes = `${cssClasses("class-1").plus("class-2")}`;
Minus
// classes = "class-1"
const classes = `${cssClasses("class-1 class-2").minus("class-2")}`;
Advanced usage
Argument types
Use Strings
, Sets
, Arrays
and even Objects
as arguments. When an Object
is provided, keys with truthy values are used as class names.
// classes = "class-1"
const classes = `${cssClasses({
"class-1": true,
"class-2": false,
})}`;
Shorthand syntax
For convience, a shorthand syntax is provided for JSX:
import React from "react";
import { classNames } from "easy-css-classes";
export const example = () => (
<div {...classNames("my-class", "my-class-2")}>Example</div>
);
import React from "react";
import { useCssModuleClassNames } from "easy-css-classes";
import styles from "./styles.css";
const moduleClassNames = useCssModuleClassNames(styles);
export const example = () => (
<div {...moduleClassNames("my-class", "my-class-2")}>Example</div>
);