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 devalue
when parsing if the value is astring
or anumber
, otherwise thekey
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
,""
orNaN
. 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>
);
};