@sliversniper/react-atr v0.1.2

React-atr

Motivation

Jsx can get ugly very fast.

use a clojure like way to represent react element

<div className="a b c">hello world</div>
['div.a.b.c', 'hello world'] // attr is optional

let onClick = (e) => alert('clicked')
<div onClick={_onClick} />
['div', {onClick}]

or more generally

let wrapAttr = {onClick: () => ''}
let headAttr = {style: {color: 'red'}}
['div', wrapAttr, [
    ['h1', headAttr, 'text'],
    ['section', 'lorem']
]]

API

import {ATR, ATRS, CX} from 'react-atr'

ATR(['div', 'hello world'])

let atr = ATRS({ca: 'a...', cb: 'b...'})
atr(['div.wrapper', 'use for css modules'])

let el = CX('div')({ca: true, cb: false}) // ==> 'div.ca'

atr(el)