1.0.1 • Published 5 years ago
@sunpietro/css-classnames v1.0.1
css-classnames
A simple helper to generate CSS class names string based on provided conditions
Usage sample
First of all you need to install the package in your project by running:
npm install @sunpietro/css-classnames
or
yarn install @sunpietro/css-classnames
or by downloading files from this repository and including the file css-classnames.min.js
in your HTML code using script
tag:
<script async src="./js/css-classnames.min.js"></script>
Then if you installed it using either NPM or Yarn, you can start using it the following way:
import * as classnames from '@sunpietro/css-classnames';
const isFluid = true;
const items = [1, 2, 3];
const classNameString = classnames({
'container': true,
'container--fluid': isFluid,
'container--filled': items.length > 1,
'container--empty': false
});
console.log(classNamesString);
// The output: 'container container--fluid container--filled'
Otherwise, the script above will slightly change to:
const isFluid = true;
const items = [1, 2, 3];
const classNameString = window.classnames({
'container': true,
'container--fluid': isFluid,
'container--filled': items.length > 1,
'container--empty': false
});
console.log(classNamesString);
// The output: 'container container--fluid container--filled'
Feedback and issues
If you have any feedback, please create an issue in this repository