react-e

Concise, readable JSX and react.createElement alternative for non-Babel code bases

$ = require('react-e')

$(Modal,
  $('.container',
    $('span.text', {className: {active: this.state.active}}, 'Some text'),
    $(Button, {className: 'primary'}, 'Close')
  )
)

Is equivalent to:

<Modal>
  <div className="container">
    <span className={'text' + (this.state.active ? ' active' : '')}>Some text</span>
    <Button className='primary'>Close</Button>
  </div>
</Modal>

Installation

npm install --save react-e

Features

React-e is a drop in replacement for react.createElement, but it provides syntactic advantages:

props can be omitted even if you have children:

static classnames can be provided inline using pug syntax:

div is assumed if tag is not provided:

classnames module is built-in:

createElement('div', { className: classnames('foo', {active: this.state.active}) })

<div className={classnames('foo', {active: this.state.active})} ></div>

css modules are bound when using require('react-e/bind')(styles):

$('.foo', { className: {active: this.state.active} })

createElement('div', { className: classnames('foo', {active: this.state.active}) })

<div className={classnames('foo', {active: this.state.active})} ></div>

$(Button, { className: ['foo', {active: this.state.active}] })

createElement(Button, { className: classnames('foo', {active: this.state.active}) })

<Button className={classnames('foo', {active: this.state.active})} ></Button>