# react-elementary

> Helper functions for React elements and props.

Latest version **1.1.0** (published 2016-08-05) · MIT license · 0 weekly downloads

## Install

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

## 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 | 1.1.0 |
| Published | 2016-08-05 |
| First published | 2016-06-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Reidar Djupvik |
| Maintainers | thirdhand |
| Keywords | react, utils |

## Links

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

## Dependencies (3)

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

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2016-08-05
- 2.0.0-beta.4 (beta) — 2017-10-31
- 2.0.0-beta.3 — 2017-10-30
- 2.0.0-beta.2 — 2017-10-25
- 2.0.0-beta.1 — 2017-10-25
- 1.0.1 — 2016-06-06
- 1.0.0 — 2016-06-01

## README

# React Elementary

React Elementary is a small library of helper functions for creating React
elements and handling props using plain JavaScript (no JSX).

[![Build Status](https://travis-ci.org/thirdhand/react-elementary.svg?branch=master)](https://travis-ci.org/thirdhand/react-elementary)

## Installation

```
npm install react-elementary
```

## Usage

### Importing

```javascript
import { createElement } from 'react-elementary';

createElement('div', 'Hello world!');

// or

import elementary from 'react-elementary';

elementary.createElement('div', 'Hello world!');

// or

import createElement from 'react-elementary/lib/createElement';

createElement('div', 'Hello world!');
```

### createElement

Use this function just like `React.createElement`, except that props are
optional. Also, the `innerHtml` prop is rewritten into
`dangerouslySetInnerHtml`. You can also create a custom `createElement` which
does other props mappings by using `mapElementPropsWith` from the
`react-elementary/lib/createElement` module (it's not exported from the index
module).

```javascript
import { createElement } from 'react-elementary';

import { OtherReactComponent } from './my-other-component';

function ReactComponent(props) {
  return createElement(
    'div',
    createElement(OtherReactComponent, props)
  );
}
```

### createFactory

Similar to `React.createFactory`. Creates a factory function for creating
multiple elements of the same type.

```javascript
import { createFactory } from 'react-elementary';

const div = createFactory('div');

function ReactComponent(props) {
  return div({ className: 'block' }, div('Hello world!'));
}
```

### createFactories

Takes an object of `ReactClass` or strings, and outputs an object of factory
functions.

```javascript
import { createFactories } from 'react-elementary';

import myReactComponents from './my-components'

const factories = createFactories(myReactComponents);

function ReactComponent(props) {
  return factories.myComponent(props, factories.myOtherComponent());
}
```

### elements

An object of common element factories, just like `React.DOM`.

```javascript
import { elements } from 'react-elementary';

const { div, em, h1, p } = elements;

function ReactComponent(props) {
  return div(
    h1('Headline'),
    p('Paragraph.'),
    p(em('Another'), ' paragraph')
  );
}
```

### mapIntoArray

Takes an iterable collection (like `Immutable.List`), and a mapping function,
returning an array.

*This is deprecated and will be removed in a later version.* It's not really
needed since React can handle non-array iterables.

```javascript
import { createFactory, elements, mapIntoArray } from 'react-elementary';

import { myArticleComponent }

const Article = createFactory(myArticleComponent);
const { div } = elements;

function ReactComponent(props) {
  return div(
    // props.articles is actually an Immutable.List, but the component doesn't
    // need to know this
    mapIntoArray(props.articles, item => Article(item));
  );
}
```

### mergeProps

Takes any number of objects, and merges them. The default function merges the
`className` property with the `classnames` module. You can also create a custom
merge function by using `createCustomMerge` from the
`react-elementary/lib/mergeProps` module.

```javascript
import { elements, mergeProps } from 'react-elementary';

const { div } = elements;

function ReactComponent(props) {
  // If the provided props are { className: 'foo', id: 'foo' }
  return div(mergeProps(props, { className: 'bar', id: 'bar' }));
  // then the returned element has the props { className: 'foo bar', id: 'bar' }
}
```

## Legal

Copyright © 2016 Reidar Djupvik

Licensed under the MIT license. See the `LICENSE` file for details.

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