Support optional classnames

README.md

@@ -31,7 +31,17 @@ Using cn is pretty simple. It is inspired by the well known [Classnames](https:/
 import cn from '@mariosant/cn';
 
 const isActive = true;
-const SomeComponent = () => <Button className={cn('btn', [isActive, 'active', 'inactive'])} .../>
+const SomeComponent = () => <Button className={cn('btn', [isActive, 'active'])} .../> // classnames would be 'btn active'
+```
+
+Why the tuple syntax, you may ask. Well, tuple allows to pass an alternative classname, optionally.
+Consider the following:
+
+```javascript
+import cn from '@mariosant/cn';
+
+const isActive = false;
+const SomeComponent = () => <Button className={cn('btn', [isActive, 'active', 'inactive'])} .../> // classnames would be 'btn inactive'
 ```
 
 ## Development

src/index.ts

@@ -1,6 +1,6 @@
-type Tuple = [boolean, string, string];
+type Tuple = [boolean, string, string?];
 
-const handleTuple = ([conditional, yeap, nope]: Tuple) =>
+const handleTuple = ([conditional, yeap, nope = '']: Tuple) =>
 	conditional ? yeap : nope;
 
 const handleString = (c: string) => c;

test/index.test.ts

@@ -8,6 +8,11 @@ test('outputs multiple classes', () => {
 	expect(className('test', 'work')).toEqual('test work');
 });
 
+test('works with simple conditions', () => {
+	expect(className([true, 'works'])).toEqual('works');
+	expect(className([false, 'works'])).toEqual('');
+});
+
 test('works with conditions', () => {
 	expect(className([true, 'works', 'does not work'])).toEqual('works');
 	expect(className([false, 'works', 'does not work'])).toEqual('does not work');