class-names vs class-lists

React

In React you're supposed to use the classnames package to construct class names that depend on certain conditions.

import classNames from 'class-names'

// only true matters
const menuItem = ({ title, selected }) => (
  <li className={classNames({'is-selected': selected})}>
    {title}
  </li>
)

const items = [
  {title: 'Home', selected: true},
  {title: 'FAQ', selected: false}
]

// both matter
const menu = ({ open }) => (
  <ol id='menu' className={classNames({'is-open': open, 'is-closed': !open})}>
    {map(menuItem, items)}
  </oi>
)

Act

In Act you simply use lists, just like in the class-lists package.

// just a list
const button = (count) => (
  ['button', {class: ['button, 'primary', 'enabled']}, count]
)

// only true matters
const menuItem = ({ title, selected }) => (
  ['li', {class: [[selected, 'is-selected']]}, title]
)

const items = [
  {title: 'Home', selected: true},
  {title: 'FAQ', selected: false}
]

// both matter
const menu = ({ open }) => (
  ['ol#menu', {class: [[open, 'is-open', 'is-closed']]}, map(menuItem, items)]
)

And if you're using css-modules, you need no special binding, just do:

``` import styles from './styles.css'

... { class: [styles, 'class', 'another_class'] } ...