-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
35 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,12 +1,15 @@ | ||
## @shat/stylenames | ||
![test](https://github.com/shatstack/stylenames/workflows/test/badge.svg) | ||
![npm version](https://img.shields.io/npm/v/@shat/stylenames) | ||
|
||
# @shat/stylenames | ||
|
||
A simple JavaScript utility for conditionally joining inline styles together. | ||
|
||
> This is a fork of the unmaintained [stylenames](https://github.com/kmathmann/stylenames) package | ||
#### What does stylenames do? | ||
## What does stylenames do? | ||
|
||
In one short sentence: "stylenames" converts an object to a css style string." | ||
In one short sentence: "stylenames converts an object to a css style string." | ||
|
||
Think [classNames](https://www.npmjs.com/package/classnames) but for inline styles. | ||
|
||
|
@@ -33,7 +36,9 @@ import styleNames from '@shat/stylenames'; | |
|
||
## Quick Start | ||
|
||
```javascript | ||
Standalone: | ||
|
||
```js | ||
styleNames({ | ||
backgroundColor: 'red', | ||
width: '120px', | ||
|
@@ -48,6 +53,20 @@ styleNames({ | |
}); | ||
``` | ||
|
||
With [Alpine.js](https://github.com/alpinejs/alpine): | ||
|
||
```html | ||
<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 | ||
|
@@ -163,4 +182,15 @@ Code is licensed under the [MIT License](./LICENSE). | |
|
||
## Acknowledgments | ||
|
||
Kevin Mathmann for building [stylenames](https://github.com/kmathmann/stylenames) which this is a fork of. | ||
This package is maintained by Hugo from [Code with Hugo](https://codewithhugo.com) and [Alpine.js Weekly](https://alpinejs.codewithhugo.com/newsletter). | ||
|
||
|
||
Special thanks to: | ||
|
||
- Kevin Mathmann who created [stylenames](https://github.com/kmathmann/stylenames) which this is a fork of. | ||
- The developers behind | ||
- [Alpine.js](https://github.com/alpinejs/alpine) | ||
- [Jest](https://github.com/facebook/jest) | ||
- [microbundle](https://github.com/developit/microbundle) | ||
- [np](https://github.com/sindresorhus/np#readme) | ||
- [xo](https://github.com/xojs/xo#readme) |