🤔 Decider

Apply CSS to React components conditionally, like a boss.

className={ decide(styles, {
    header: true,
    mobile: props.isMobile,
    narrow: parseInt(props.width) < 400,
    hidden: (props.hidden !== "false" && Boolean(props.hidden)),
    fixed: parseInt(props.width) >= 400 || !props.isMobile
})}

Why?

There's a need of switching class names according to some conditions. Here's some examples:

• You have a shopping cart which can be either cart or cart empty according to its props

• You have a Header component. Its class name is always header, but on a mobile device, it should be also mobile. Oh, and if the width prop is less than '400px', it should be also narrow. Oh, and it should be hidden when either hidden prop is truthy but not equals to "false" string, and it should be also fixed when it isn't either narrow or mobile.

• You have an universal rules like a mobile class name should be applied to all of your components and you want to have the decision logic as a single piece of code imported by all of your components

I bet you get the idea. This is what decider is for, and this package could help achieving that with a really tiny and meaningful way.

Installation

npm i --save mvoloskov/decider

Syntax

import decide from 'decider'

decide(styles, {
  className: condition
})

The first argument is your styles imported as a CSS module. The second is decision matrix, where keys are class names and values are conditions which'll be interpreted as either true or false. If it's true, the corresponding class name will be applied, otherwise it wouldn't.

Example

import decide from 'decider'
import styles from './header.module.css'

export default props => (
  <header className={ decide(styles, {
  
    // 'header' class name is always applied
    header: true,
    
    // 'mobile' class name will apply if 'mobile' prop is truthy,
    // so the result would be 'header mobile'
    mobile: props.mobile,
    
    // 'fixed' would be applied either if there's an
    // explicitly set 'fixed' prop or if the 'mobile' prop is falsy
    fixed: props.fixed || !props.mobile,
    
    // 'narrow' class name would be applied if 'width' prop is less than 400
    narrow: props.width < 400
  })} >
    ...
  </header>
)

Differences from classnames

• Decide is a pure function. It works with CSS modules without that bind magic needed, so you can use it virtually anywhere. Classnames, on the other hand, becomes as simple as Decider just with CSS modules, but by the cost of lost purity and not being able to be used with functional components.

• Smaller bundle size: Decider is !

• Syntax and usage are much easier to adopt.