Class Parser

An easy way to styling inline dynamically.

Installation

Installing class-parser with npm.

npm install class-parser

Usage

Getting the module

First of all, you need to import the parse function from the module.

// Using require
var parse = require("class-parser");

// or using import
import parse from "class-parser";

Parsing variables

Use the parse function to convert variables into a single string.

Any of the basic variables are allowed to be used such as booleans, strings, numbers, objects and arrays so you can combine them as you need it.

Let's see an example:

var myStyle = {
    visible: true,
    active: false
};

var myClass = parse("button", myStyle);
// expected string: "button visible"

There's no limit in the arguments the function can receive

Strings and Numbers

Both strings and numbers don't need to be wrapped neither in an object nor an array, but you can do it if needed.

Les't see some examples:

parse("This", "will", "work");
// expected string: "This will work"

parse(["This", "will"], { text1: "work", text2: "too" });
// expected string: "This will work too"

parse({ one: 1, two: 2, zero: 0 }, [-1, 3, 4]);
// expected string: "1 2 3 4"

Notice: The key names on the object are ignored and only uses de value when parsing if the value is a string or a number, otherwise the key will be used.

Booleans

The proper way to use booleans is wrapped inside an object instead as a single parameter.

So, this won't work:

// wrong way
var active = true;
var myClass = parse("button", active);

The correct way is:

// correct way
var active = true;
var myClass = parse("button", { active });

Arrays

There's two kinds of arrays, the anonymous, which is created out of a variable or an object (as we saw before) and the named, the last ones has a different behaviour.

Even if the array has multiples values, it just create a single string when it's parsed, but, the key is if one or more of those values are falsy the string will be empty.

Also, it must be wrapped in an object.

Let's see how it works:

var will = [true, true, true];
var fail = [true, false];
var work = [1, 2, 3];

var myClass = parse("This", { will, fail, work });
// expected string: "This will work"

Falsy: A value considered "false", for example: 0, null, "" or NaN. More info here.

It works with mixed arrays to:

// This is an example of a form with a button
// which is enabled when all the fields are filled.
var name = "John";
var lastName = "Doe";
var age = 24;

var btnClass = parse("button", { active: [name, lastName, age] });
// expected string: "button active"

A React.js example

This is a simple example of how to use the class-parser in a react component:

import parse from "class-parser";

const Button = ({ active }) => {
    return (
        <button className={ parse("button", { active }) }>
            Click me!
        </button>
    );
};

License

MIT