kthjm/atra

manage attributes in react

atra

separate attribute by immutable / mutable in render.

basic features:

Automatic Vendor Prefixing	Pseudo Classes	Media Queries	Styles As Object Literals	Extract CSS File
✓	×	×	✓	×

Installation

yarn add atra

Usage

import React from 'react'
import Atra from 'atra'

export default (props) => (
  <div {...atra('div', { className: props.foo ? 'hoge' : '' })}>
    <span {...atra('span1')} />
    <span {...atra('span2', {
      style: {
        transition: props.bar && '1s',
        opacity: props.bar ? 1 : 0
      }
    })} />
  </div>
)

const atra = Atra({
  div: {
    id: 'semantic',
    style: {
      position: 'relative'
    }
  },
  span1: {
    className: 'fuga',
    style: {
      color: '#483738'
    }
  },
  span2: {
    style: {
      color: '#482716',
      opacity: 0.5 // <= ignore
    }
  }
})

API

Atra({ [name]: immutable }[, prefixerConfig])

atra(name[, mutable])

immutable, mutable is used as attribute object.

prefixerConfig is inline-style-prefixer's.

License

MIT (http://opensource.org/licenses/MIT)