1.0.0 • Published 5 years ago
getclass.react v1.0.0
getClass.react
Better react class names.
Usage
Follow these steps to get started:
Usage
getClass.react is a simple, small (< 1KB), dependency-free utility that allows you to dynamically set class names for React components. You can use it in a variety of ways:
- Use strings to add classes.
- Use objects to add classes conditionally.
- Use arrays with an object to express if/else classes.
- Classes are never duplicated.
getClass.react draws inspiration from the Angular ng-class
method.
getClass('apple', {'pie': true}) // output -> 'apple pie'
getClass({
'apple': true,
'pie': false
}) // output -> 'apple'
getClass(
{'apple': true},
{'pie': true}
) // output -> 'apple pie'
getClass('apple', {
'apple': true
}) // output -> 'apple'
getClass({
[1 + 2 === 3]: ['apple', 'pie'],
[1 + 2 !== 3]: ['apple', 'pie']
}) // output -> 'apple pie'
getClass('apple', {
'pie': 1 + 2 === 3,
[1 + 2 !== 3]: ['is good', 'is bad']
}) // output -> 'apple pie is bad'
Inside a react component:
// props = {sample: true, badSample: false}
<SampleComponent
className={getClass('apple', {
'pie': this.props.sample,
'is-good': this.props.badSample
})}
/>
// className='apple pie'
Install
Using NPM, install getClass.react, and save it to your package.json
dependencies.
$ npm install getClass.react --save
Then import, naming it according to your preference.
import getClass from 'getClass.react'
Browser Support
Rallax depends on the following browser APIs:
Consequently, it supports the following natively:
- Chrome 5+
- Firefox 4+
- Safari 5+
- Opera 12+
- IE 9+
License
MIT. © 2019 Christopher Cavalea
1.0.0
5 years ago