react-factories

This module provides useful, flexible alternative to React.createFactory, React.createElement and the deprecated React.DOM, which can in turn be used as an alternative to JSX.

Installation

npm i react-factories

Usage

This module doesn't check that you use it correctly, so if you use one of the factories with any set of arguments not included in the below examples, something will break.

import {div} from 'react-factories'
import {factory} from 'react-factories'

// Call the factory without arguments to make an empty element
div() // <div />

// Add some content (string or React element)
div("Hello World!") // <div>Hello World!</div>
div("Hello ", div("World!")) // <div>Hello <div>World!</div></div>

// Add some props
div({id:"foo"}) // <div id="foo" />
div({id: "foo"}, "bar") // <div id="foo">bar</div>

// Use it with your own tags or components (anything that can be used as the first argument to React.createElement)
const somecomponent = factory(SomeComponent)
somecomponent({prop:'value'}, "content") // <SomeComponent prop="value">content</SomeComponent>

Usage as a JSX alternative

This module was developed to make it easier to use React without JSX. Specifically it was originally developed as a JSX alternative for Coffeescript, but it works just as well in plain ol JS or any other language that you can use React in (I think it might even work in ClojureScript, but I mean... why?)

div( {className:'foo',style:{color:'red'}},
  h1("Heading"),
  img({src:"http://example.com/img"})
)