A simple JavaScript utility for conditionally joining inline styles together.
This is a fork of the unmaintained stylenames package
In one short sentence: "stylenames converts an object to a css style string."
Think classNames but for inline styles.
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';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>let styles1 = styleNames({
height: '120px',
width: '100px'
});
console.log(styles1); //--> 'height:120px;width:100px;'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;'const styles = styleNames({
'height:120px;width:100px;': true
});
console.log(styles); //--> 'height:120px;width:100px;'const styles = styleNames({backgroundColor: 'red'});
console.log(styles); //--> 'background-color:red;'const styles = styleNames(['height:120px', 'width:100px']);
console.log(styles); //--> 'height:120px;width:100px;'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%;'- Node 10
- Yarn 1.x or npm
- Clone the repository
- Run
yarnornpm installinstalls all required dependencies.
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).
Code is licensed under the MIT License.
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