https://github.com/addonewr/astro-classname
A small and powerful package which can help you change or add classnames quickly and easily
https://github.com/addonewr/astro-classname
Last synced: over 1 year ago
JSON representation
A small and powerful package which can help you change or add classnames quickly and easily
- Host: GitHub
- URL: https://github.com/addonewr/astro-classname
- Owner: AddOneWR
- License: mit
- Created: 2019-01-05T15:59:09.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-04-22T12:19:15.000Z (about 7 years ago)
- Last Synced: 2025-04-03T03:44:23.482Z (over 1 year ago)
- Language: JavaScript
- Size: 4.88 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## astro-classname
[](https://github.com/AddOneDn/astro-classname)
[](https://www.npmjs.com/package/astro-classname)
A small and powerful package which can help you change or add classnames quickly and easily
### install
npm:
```
npm install astro-classname
```
yarn:
```
yarn add astro-classname
```
### Usage
You can set anything to the classname，but the value that was associated with a given key is falsy， it will not be effective。Object has the highest priority
**Before you use，you should require or import the package**
You can also add classname to dom directly
```javascript
classname('tom', 'bob'); // tom bob
classname('tom', { bob: true }); // tom bob
classname('tom', { bob: false }); // tom
classname({ 'tom-bob': true }); // tom-bob
classname({ tom: false }, { bob: true }); // bob
classname({ tom: false, 'bob': true }); // bob
classname('tom', { bob: false }, 'lili', undefined, 0, 1, null, { hey: 0 }, '') // tom lili 0 1
```
Usage with react!
```javascript
import cn from 'astro-classname';
classname('button', {
'btn-pressed': this.state.isPressed,
'btn-over': !this.state.isPressed && this.state.isHovered
})
```
Usage with jquery!
```javascript
classname($('btn'), 'tom', 'bob');
classname(document.getElementById('btn'), { tom: true });
```
You can use all the methods in anywhere