react-fp

A functional JSX alternative for React

What React.createElement should have been.

Quick Example

import {div, h2} from 'react-fp'

const Panel = ({title, children}) => (
  div({className: 'panel'}, [
    h2(title),
    children
  ])
)

Install

npm install react-fp --save

Usage

Elements

// `tag` can be any supported HTML or SVG tag
import {tag} from 'react-fp'

tag()                                 // No props or children
tag(child1, child2, ...rest)          // No props, list of children
tag([child1, child2, ...rest])        // No props, array of children
tag(props)                            // Props only
tag(props, child1, child2, ...rest)   // Props, list of children
tag(props, [child1, child2, ...rest]) // Props, array of children

Components

Pass a ReactClass or ReactFunctionalComponent into the provided createFactory function to create a React.createElement helper function for the given component with interface above.

Example

// panel.js
import {createFactory, div, h2} from 'react-fp'

const Panel = ({title, children}) => (
  div({className: 'panel'}, [
    h2(title),
    children
  ])
)

export default createFactory(Panel) // Export the React.createElement helper as default
export {Panel as PanelClass}        // Export the underlying ReactClass in case it is needed (optional)

// app.js
import {div, h1} from 'react-fp'
import Panel from './panel.js'

const App = () => (
  div([
    h1('hello world'),
    Panel({title: 'cool stuff'}, [
      div('panel contents')
    ])
  ])
)

See Also

• https://github.com/uber/r-dom
• https://github.com/mlmorg/react-hyperscript
• https://github.com/ohanhi/hyperscript-helpers

License

MIT