@shat/stylenames
A simple JavaScript utility for conditionally joining inline styles together.
This is a fork of the unmaintained stylenames package
What does stylenames do?
In one short sentence: "stylenames converts an object to a css style string."
Think classNames but for inline styles.
Install
From CDN: Add the following script to the end of your <head> section.
<script src="https://cdn.jsdelivr.net/npm/@shat/[email protected]/lib/index.umd.js"></script>That's it. It will initialize itself as styleNames().
From NPM: Install the package from NPM.
npm install @shat/stylenamesInclude it in your script.
import styleNames from '@shat/stylenames';Quick Start
Standalone:
styleNames({
backgroundColor: 'red',
width: '120px',
'height':{
// If the condition is false the style does not get used.
'200px': false,
// Only the first value with true condition is used.
'300px': true,
'400px': true
},
});With Alpine.js:
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
<div x-data="{}">
<button :style="styleNames({ backgroundColor: 'red', padding: '20px' })">
A red button
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/@shat/[email protected]/lib/index.umd.js"></script>Examples
Without conditions
let styles1 = styleNames({
height: '120px',
width: '100px'
});
console.log(styles1); //--> 'height:120px;width:100px;'With one condition using a boolean toggle
let styles1 = styleNames({
height: '120px',
width: {
'200px': false
}
});
console.log(styles1); //--> 'height:120px '
let styles2 = styleNames({
height: '120px',
width: {
'200px': true
}
});
console.log(styles2); //--> 'height:120px;width:200px;'With multiple rules with 1 boolean toggle
const styles = styleNames({
'height:120px;width:100px;': true
});
console.log(styles); //--> 'height:120px;width:100px;'With camelcased rules
const styles = styleNames({backgroundColor: 'red'});
console.log(styles); //--> 'background-color:red;'With array input
const styles = styleNames(['height:120px', 'width:100px']);
console.log(styles); //--> 'height:120px;width:100px;'With more than one condition using a function toggle
let itemCount = 0;
let styleNamesConfig = {
display: {
'none': () => itemCount === 0
},
height: '120px',
width: {
'100px': () => itemCount <= 1,
'200px': () => itemCount <= 2,
'400px': () => itemCount <= 4,
'100%': () => itemCount > 4
}
};
console.log(styleNames(styleNamesConfig)); //--> 'display:none;height:120px;width:100px;'
itemCount++; //1
console.log(styleNames(styleNamesConfig)); //--> 'height:120px;width:100px;'
itemCount++; //2
console.log(styleNames(styleNamesConfig)); //--> 'height:120px;width:200px;'
itemCount++; //3
console.log(styleNames(styleNamesConfig)); //--> 'height:120px;width:400px;'
itemCount += 12; //15
console.log(styleNames(styleNamesConfig)); //--> 'height:120px;width:100%;'Contributing
Requirements
- Node 10
- Yarn 1.x or npm
Setup
- Clone the repository
- Run
yarnornpm installinstalls all required dependencies.
npm scripts
Equivalent
npm run <script>should also work
yarn buildwill bundle/transpile JavaScript for all targets using microbundle.yarn testwill run tests using Jest.yarn lintwill lint all of the files with xoyarn formatwill run lint with--fixoption on all the examples files (and tests).
LICENSE
Code is licensed under the MIT License.
Acknowledgments
This package is maintained by Hugo from Code with Hugo and Alpine.js Weekly.
Special thanks to:
- Kevin Mathmann who created stylenames which this is a fork of.
- The developers behind