One of the packages I’ve been using a lot is classnames
, a simple JavaScript utility for conditionally joining classNames together. Recently I stumbled upon @sindresorhus/class-names
, a likewise package whose usage is very similar.
import classNames from '@sindresorhus/class-names';
// Think of these like props of your React component …
const props = {
type: 'success',
small: true
};
classNames(
'button',
`button-${props.type}`
{
'button-block': props.block,
'button-small': props.small
}
);
//=> 'button button-success button-small'
Why bother to switch then? As per FAQ:
How is it different from
classnames
?
- Dedupes by default.
- Doesn’t coerce numbers to strings.
- Doesn’t support array input. Just use the spread operator.
Worth a shot I guess …
Installation per npm
npm install @sindresorhus/class-names
@sindrehorus/class-names
Source (GitHub) →
The original classnames
package →
Leave a comment