react-e

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

Usage no npm install needed!

<script type="module">
  import reactE from 'https://cdn.skypack.dev/react-e';
</script>

README

react-e CircleCI

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>