npm.io
2.1.2 • Published 9 years ago

react-e

Licence
MIT
Version
2.1.2
Deps
1
Vulns
0
Weekly
0
Stars
6
SummaryDependencyVersions

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>