React-elementary NPM

React Elementary

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

Installation

npm install react-elementary

Usage

Importing

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).

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.

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.

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.

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.

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.

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' }
}