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:

react-e	$('div', $('span', 'Hello world'))
react.createElement	createElement('div', {}, createElement('span', {}, 'Hello world'))
JSX	<div> <span>Hello world</span> </div>

static classnames can be provided inline using pug syntax:

react-e	$('label.foo.bar')
react.createElement	createElement('label', {className: 'foo bar'})
JSX	<label className="foo bar"></label>

div is assumed if tag is not provided:

react-e	$('.foo')
react.createElement	createElement('div', {className: 'foo'})
JSX	<div className="foo"></div>

classnames module is built-in:

react-e	$('.foo', { className: {active: this.state.active} })
react.createElement	classnames = require('classnames') createElement('div', { className: classnames('foo', {active: this.state.active}) })
JSX	classnames = require('classnames') <div className={classnames('foo', {active: this.state.active})} ></div>

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

react-e	styles = require('./stylesheet.css') $ = require('react-e/bind')(styles) $('.foo', { className: {active: this.state.active} })
react.createElement	styles = require('./stylesheet.css') classnames = require('classnames/bind')(styles) createElement('div', { className: classnames('foo', {active: this.state.active}) })
JSX	styles = require('./stylesheet.css') classnames = require('classnames/bind')(styles) <div className={classnames('foo', {active: this.state.active})} ></div>

**Also works on components that use the prop `className`:**

react-e	styles = require('./stylesheet.css') $ = require('react-e/bind')(styles) $(Button, { className: ['foo', {active: this.state.active}] })
react.createElement	styles = require('./stylesheet.css') classnames = require('classnames/bind')(styles) createElement(Button, { className: classnames('foo', {active: this.state.active}) })
JSX	styles = require('./stylesheet.css') classnames = require('classnames/bind')(styles) <Button className={classnames('foo', {active: this.state.active})} ></Button>