CSS Class Builder
A small typescript package built to work with ReactJS
to shorten manipulation and handling of css classnames by combining useful methods and functions into one single package.
How to use
Installation
You can install the package to your javascript/typescript project, using below command
npm i css-class-builder
Setup
After installation import the package in your project file,
import cssClassBuilder from 'css-class-builder';
Then initialize the builder function,
const classname = cssClassBuilder();
This initialization creates a store where we can add, remove or toggle classnames. We can use classname
to interact with the store.
Features
Initializing with value
The builder function can be initialized with a single or multiple classnames.
const classname = cssClassBuilder('initial'); // -> initial
const headingClass = cssClassBuilder('heading h-6'); // -> heading h-6
Extending css class
Once you have initialized the builder function you can use extend
method to add classname(s) to the store.
const classname = cssClassBuilder();
classname.extend('another-css-class'); // -> another-css-class
classname.extend('red green'); // -> another-css-class red green
Removing css class
remove
method can be used to remove classname(s) from the store.
const classname = cssClassBuilder('bold italic');
classname.remove('italic'); // -> bold
Toggling class dynamically
Classname(s) can be extended or removed from the store. We can use toggle
method to toggle classname(s) over a boolean value.
- For
true
, the classname will be added to the current classname. - For
false
, the class will be removed from the current classname.
const classname = cssClassBuilder('initial');
let anotherBooleanValue: boolean = true;
classname.toggle('blue', anotherBooleanValue); // -> initial blue
otherValue = false;
classname.toggle('blue', anotherBooleanValue); // -> initial
Using stored classnames
When ready to use the classname(s) stored in the builder for the className
or class
attribute of the HTML/JSX tags, unzip
method can be used to get all classname(s) as a single string.
const classname = cssClassBuilder('initial');
classname.extend('bold italic');
return <div class={classname.unzip}></div>;
Above div
will have the following classnames: initial
, bold
, italic
.
Changelog
Please see the changelog to know about the latest updates.
Contributions
Contribution to this project are most welcomed.
If you find bugs or want more features, but don't know how to fix/implement them, please fill an issue.
If you fixed bugs or implemented new features, please send a pull request.