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>
yarn add react-e
or
npm install --save react-e
React-e is a drop in replacement for react.createElement
, but it provides syntactic advantages:
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> |
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> |
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> |