Add If Confition Method to ClassNames

README.md

@@ -207,6 +207,17 @@ const list = new ClassNames()
 // list => "p-1"
 ```
 
+## If Condition
+
+as of `1.2.0` you use add an If Conditions
+
+```js
+const size = "xs";
+
+const list = new ClassNames().if(size === "xs", "rounded-sm", "rounded").list();
+// list => "rounded-sm"
+```
+
 ## Static Methods
 
 -   .add() - Alias of `new ClassNames().add()`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codevachon/classnames",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "MIT",
   "author": {
     "email": "[email protected]",

src/ClassNames.test.ts

@@ -369,6 +369,26 @@ describe("ClassNames", () => {
         });
     });
 
+    describe("if", () => {
+        const baseClasses = ["Beer", "Banana"];
+        const isTrue = "true";
+        const isFalse = "false";
+
+        test("Adds the expected values when condition is true", () => {
+            const condition = true;
+            expect(new ClassNames(baseClasses).if(condition, isTrue, isFalse).list()).toContain(
+                isTrue
+            );
+        });
+
+        test("Adds the expected values when condition is false", () => {
+            const condition = false;
+            expect(new ClassNames(baseClasses).if(condition, isTrue, isFalse).list()).toContain(
+                isFalse
+            );
+        });
+    });
+
     describe("static isClassNames method", () => {
         test("returns true if value is an instance of ClassNames", () => {
             const value = ClassNames.add("me");

src/ClassNames.ts

@@ -299,6 +299,32 @@ class ClassNames {
         return this;
     }
 
+    /**
+     * Conditionally Added Classes
+     *
+     * ```ts
+     * new ClassNames().if(disabled === true, "bg-gray-100", "bg-sky-700").list();
+     * ```
+     *
+     * @param condition The If Condition
+     * @param isTrue Values to add if the Condition is True
+     * @param isFalse Values to add of the Condition is False
+     * @returns this instance
+     */
+    public if(
+        condition: boolean,
+        isTrue: ClassNameAddValue,
+        isFalse: ClassNameAddValue = ""
+    ): this {
+        if (condition) {
+            this.add(isTrue);
+        } else {
+            this.add(isFalse);
+        }
+
+        return this;
+    }
+
     /**
      * Static accessor to add ClassNames
      *