react-fp

A functional JSX alternative for React

Usage no npm install needed!

<script type="module">
  import reactFp from 'https://cdn.skypack.dev/react-fp';
</script>

README

react-fp

A functional JSX alternative for React

build status coverage status dependencies status npm version

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

License

MIT