rockclass
v0.0.1
Published
enforce handle the css name together
Downloads
2
Maintainers
Readme
rockclass
Conditionally join CSS class names together - Especially useful with React
Inspired by class-names but support array input
Install
$ npm install rockclass
Usage
rockClass('unicorn', 'rainbow');
//=> 'unicorn rainbow'
rockClass('unicorn', ['rainbow']);
//=> 'unicorn rainbow'
rockClass({awesome: true, foo: false}, 'unicorn', {rainbow: false});
//=> 'awesome unicorn'
rockClass('unicorn', null, undefined, 0, 1, {foo: null});
//=> 'unicorn'
const buttonType = 'main';
rockClass({[`button-${buttonType}`]: true});
//=> 'button-main'
const Button = props => {
console.log(props);
/*
{
type: 'success',
small: true
}
*/
const buttonClass = rockClass(
'button',
{
[`button-${props.type}`]: props.type,
'button-block': props.block,
'button-small': props.small
}
);
console.log(buttonClass);
//=> 'button button-success button-small'
return <button className={buttonClass}>…</button>;
};
API
rockClass(…input)
Conditionally join CSS class names together.
input
Type: string
Object
Array
Accepts a combination of strings objects and Array. Only object keys with truthy values are included. Anything else is ignored.
FAQ
How is it different from class-names
?
- support array input.
Related
- react-extras - Useful components and utilities for working with React
- class-names - Conditionally join CSS class names together - Especially useful with React
License
MIT © hkc