# react-e

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

Latest version **2.1.2** (published 2017-06-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-e
pnpm add react-e
yarn add react-e
bun add react-e
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.2 |
| Published | 2017-06-10 |
| First published | 2016-10-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Originate |
| Maintainers | originate |

## Links

- npm: https://www.npmjs.com/package/react-e
- Repository: https://github.com/Originate/react-e
- Homepage: https://github.com/Originate/react-e#readme
- Issues: https://github.com/Originate/react-e/issues
- npm.io page: https://npm.io/package/react-e

## Dependencies (1)

- [classnames](https://npm.io/package/classnames.md) ^2.2.5

## Recent versions

- 2.1.2 (latest) — 2017-06-10
- 2.1.1 — 2017-01-25
- 2.1.0 — 2017-01-12
- 2.0.2 — 2016-11-04
- 2.0.1 — 2016-10-28
- 2.0.0 — 2016-10-25
- 1.0.2 — 2016-10-12
- 1.0.1 — 2016-10-07
- 1.0.0 — 2016-10-07

## README

# react-e [![CircleCI](https://circleci.com/gh/Originate/react-e.svg?style=svg)](https://circleci.com/gh/Originate/react-e)

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

```javascript
$ = require('react-e')

$(Modal,
  $('.container',
    $('span.text', {className: {active: this.state.active}}, 'Some text'),
    $(Button, {className: 'primary'}, 'Close')
  )
)
```
Is equivalent to:
```jsx
<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:
<table>
  <tr>
    <th>react-e</th>
    <td><pre lang="javascript">
$('div',
  $('span', 'Hello world'))</pre></td>
  </tr>
  <tr>
    <th>react.createElement</th>
    <td><pre lang="javascript">
createElement('div', {},
  createElement('span', {}, 'Hello world'))</pre></td>
  </tr>
  <tr>
    <th>JSX</th>
    <td><pre lang="jsx">
&lt;div&gt;
  &lt;span&gt;Hello world&lt;/span&gt;
&lt;/div&gt;</pre></td>
  </tr>
</table>

#### static classnames can be provided inline using [pug](https://www.npmjs.com/package/pug) syntax:
<table>
  <tr>
    <th>react-e</th>
    <td><pre lang="javascript">$('label.foo.bar')</pre></td>
  </tr>
  <tr>
    <th>react.createElement</th>
    <td><pre lang="javascript">createElement('label', {className: 'foo bar'})</pre></td>
  </tr>
  <tr>
    <th>JSX</th>
    <td><pre lang="jsx">&lt;label className="foo bar"&gt;&lt;/label&gt;</pre></td>
  </tr>
</table>

#### `div` is assumed if tag is not provided:
<table>
  <tr>
    <th>react-e</th>
    <td><pre lang="javascript">$('.foo')</pre></td>
  </tr>
  <tr>
    <th>react.createElement</th>
    <td><pre lang="javascript">createElement('div', {className: 'foo'})</pre></td>
  </tr>
  <tr>
    <th>JSX</th>
    <td><pre lang="jsx">&lt;div className="foo"&gt;&lt;/div&gt;</pre></td>
  </tr>
</table>

#### [classnames](https://www.npmjs.com/package/classnames) module is built-in:
<table>
  <tr>
    <th>react-e</th>
    <td><pre lang="javascript">
$('.foo', {
  className: {active: this.state.active}
})</pre></td>
  </tr>
  <tr>
    <th>react.createElement</th>
    <td><pre lang="javascript">
classnames = require('classnames')

createElement('div', {
  className: classnames('foo', {active: this.state.active})
})</pre></td>
  </tr>
  <tr>
    <th>JSX</th>
    <td><pre lang="jsx">
classnames = require('classnames')

&lt;div
  className={classnames('foo', {active: this.state.active})}
&gt;&lt;/div&gt;</pre></td>
  </tr>
</table>

#### [css modules](https://github.com/css-modules/css-modules) are bound when using `require('react-e/bind')(styles)`:
<table>
  <tr>
    <th>react-e</th>
    <td><pre lang="javascript">
styles = require('./stylesheet.css')
$ = require('react-e/bind')(styles)

$('.foo', {
  className: {active: this.state.active}
})</pre></td>
  </tr>
  <tr>
    <th>react.createElement</th>
    <td><pre lang="javascript">
styles = require('./stylesheet.css')
classnames = require('classnames/bind')(styles)

createElement('div', {
  className: classnames('foo', {active: this.state.active})
})</pre></td>
  </tr>
  <tr>
    <th>JSX</th>
    <td><pre lang="jsx">
styles = require('./stylesheet.css')
classnames = require('classnames/bind')(styles)

&lt;div
  className={classnames('foo', {active: this.state.active})}
&gt;&lt;/div&gt;</pre></td>
  </tr>
</table>
**Also works on components that use the prop `className`:**
<table>
  <tr>
    <th>react-e</th>
    <td><pre lang="javascript">
styles = require('./stylesheet.css')
$ = require('react-e/bind')(styles)

$(Button, {
  className: ['foo', {active: this.state.active}]
})</pre></td>
  </tr>
  <tr>
    <th>react.createElement</th>
    <td><pre lang="javascript">
styles = require('./stylesheet.css')
classnames = require('classnames/bind')(styles)

createElement(Button, {
  className: classnames('foo', {active: this.state.active})
})</pre></td>
  </tr>
  <tr>
    <th>JSX</th>
    <td><pre lang="jsx">
styles = require('./stylesheet.css')
classnames = require('classnames/bind')(styles)

&lt;Button
  className={classnames('foo', {active: this.state.active})}
&gt;&lt;/Button&gt;</pre></td>
  </tr>
</table>

---
_Source: https://npm.io/package/react-e · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._