Nutella Pancake Machine

    @44north/classnames
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.0 • Public • Published

    @44north/classnames

    A Module to aid in managing classnames in your applications

    Install

    npm install @44north/classnames
    

    or

    yarn add @44north/classnames
    

    Usage

    import React from "react";
    import { ClassNames } from "@44north/classnames";
    
    const Page = () => <h1 classNames={new ClassNames("text-xl").list()}>Hello World</h1>;

    API

    .add()

    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"

    Conditionals

    You 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"

    .remove()

    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"

    .list() / .toString()

    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>

    .find()

    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"

    .isEmpty()

    returns if the instance has any classes

    const value = new ClassNames(["a", "b", "c"]).isEmpty();
    // value => false

    .has()

    returns if the instance has the provided value

    const value = new ClassNames(["a", "b", "c"]).has("b");
    // value => true
    const value = new ClassNames(["mt-3", "mb-4", "pt-8"]).has(new RegExp("z-"));
    // value => false

    .isClassNames()

    returns if the provided value is an instance of ClassName

    const value = new ClassNames().isClassName(["a"]);
    // value => false

    .length

    returns the number of classes added to the instance

    const value = new ClassNames(["a", "b", "c"]).length;
    // value => 3

    Static Methods

    • .add() - Alias of new ClassNames().add()
    • .isClassNames() - Alias of new ClassNames().isClassNames()

    Keywords

    none

    Install

    npm i @44north/classnames

    DownloadsWeekly Downloads

    4

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    35 kB

    Total Files

    7

    Last publish

    Collaborators

    • cvachon44n