classnames 1.0.0
Install from the command line:
Learn more about npm packages
$ npm install @codevachon/classnames@1.0.0
Install via package.json:
"@codevachon/classnames": "1.0.0"
About this version
A Library Used for managing ClassNames in Javascript
import { ClassNames } from "@codevachon/classnames";
export default function Homepage() {
return (
<div
className={new ClassNames([
"bg-slate-900 text-white",
"flex justify-center items-center",
"h-screen w-full"
]).list()}
>
<h1 className={new ClassNames(["text-6xl"]).list()}>Hello World</h1>
</div>
);
}Adds a class to the instance
import { ClassNames } from "@44north/classnames";
const list = new ClassNames("a", "b", "c").list();
// list => "a b c"const list = new ClassNames().add("a", "b", "c").list();
// list => "a b c"const list = new ClassNames().add(["a", "b", "c"]).list();
// list => "a b c"const list = new ClassNames().add("a b c").list();
// list => "a b c"const list = new ClassNames().add(["a b c"]).list();
// list => "a b c"const list = new ClassNames("a").add(new ClassNames(["b", "c"])).list();
// list => "a b c"removes a class from the instance
const list = new ClassNames().add(["a", "b", "c"]).remove("a").list();
// list => "b c"const list = new ClassNames().add(["a", "b", "c"]).remove(["a", "c"]).list();
// list => "b"const list = new ClassNames().add(["a", "b", "c"]).remove("a", "c").list();
// list => "b"const list = new ClassNames().add(["mt-3", "mb-4", "pt-8"]).remove(new RegExp("t-")).list();
// list => "mb-4"returns this instance as a class formated string.
const list = new ClassNames().add(["a", "b", "c"]).list();
// list => "b c"<h1 classNames={new ClassNames("text-xl").list()}>Hello World!</h1>allows you to search the instance for a particular class
const list = new ClassNames().add(["a", "b", "c"]).find("b");
// list => ["b"]const list = new ClassNames().add(["mt-3", "mb-4", "pt-8"]).find(new RegExp("b"));
// list => "mb-4"returns if the instance has any classes
const value = new ClassNames(["a", "b", "c"]).isEmpty();
// value => falsereturns if the instance has the provided value
const value = new ClassNames(["a", "b", "c"]).has("b");
// value => trueconst value = new ClassNames(["mt-3", "mb-4", "pt-8"]).has(new RegExp("z-"));
// value => falsereturns if the provided value is an instance of ClassName
const value = new ClassNames().isClassName(["a"]);
// value => falsereturns the number of classes added to the instance
const value = new ClassNames(["a", "b", "c"]).length;
// value => 3You can pass an object as part of add with the classname as a key and value as a boolean.
const values = {
a: true,
b: false,
c: a !== b
};
const list = new ClassNames(values).list();
// list => "a c"- .add() - Alias of
new ClassNames().add() - .isClassNames() - Alias of
new ClassNames().isClassNames()
