react-functional

Add life cycle methods to stateless functional components, without the class noise.

Supported Version

React 16 (use v2.0.0 for older versions)

npm i --save react-functional

functional(component)

Pass life cycle methods as an options object

import { React } from 'react'
import functional from 'react-functional'
 
function ComponentA(props) {
  return <div>{ props.name }</div>
}
 
const options = {
  shouldComponentUpdate: (props, nextProps) =>
    props.name !== nextProps.name
}
 
export default functional(ComponentA, options)

Add life cycle methods to function component

import { React } from 'react'
import functional from 'react-functional'
 
function ComponentA(props) {
  return <div>{ props.name }</div>
}
 
ComponentA.shouldComponentUpdate = (props, nextProps) =>
  props.name !== nextProps.name
 
export default functional(ComponentA)

Compose component from an object

import { React } from 'react'
import functional from 'react-functional'
 
function shouldComponentUpdate(props, nextProps) {
  return props.name !== nextProps.name
}
 
function render(props) {
  return <div>{ props.name }</div>
}
 
export default functional({shouldComponentUpdate, render})

Access Component Instance

Since this isn't a class, using this to lookup a component instance is undesirable (and probably bug-prone). So react-functional passes the component instance as the last argument of the render method and all life cycle methods

import { React } from 'react'
import functional from 'react-functional'
 
function ComponentA(props, cmp) {
  return <input ref='name' onClick={()=>console.log(cmp.refs.name.value)}/>
}
 
const options = {
  componentWillReceiveProps: (nextProps, cmp) => 
    cmp.refs.name.value = nextProps.name
}
 
export default functional(ComponentA, options)
 

Supported properties

• propTypes
• defaultProps
• displayName (auto-detected from function names)

Supported methods

• componentWillMount(props)
• componentDidMount(props, refs)
• componentWillReceiveProps(props, nextProps, refs)
• shouldComponentUpdate(props, nextProps, refs)
• componentWillUpdate(props, nextProps, refs)
• componentDidUpdate(props, prevProps, refs)
• componentWillUnmount(props, refs)

Test Coverage

npm run cov

File	% Stmts	% Branch	% Funcs	% Lines
All files	100	100	100	100

npm test

test/index.js
  function component
    ✓ componentWillMount called
    ✓ render function called
    ✓ div element rendered
    ✓ prop passed through
    ✓ instance passed through render
    ✓ instance passed through lifecycle methods
 
  function w/ options object
    ✓ componentWillMount called
    ✓ render function called
    ✓ div element rendered
    ✓ prop passed through
    ✓ instance passed through render
    ✓ instance passed through lifecycle methods
 
  object component
    ✓ componentWillMount called
    ✓ render function called
    ✓ div element rendered
    ✓ prop passed through
    ✓ instance passed through render
    ✓ instance passed through lifecycle methods

Thanks

• react-stateless for inspiration and code
• nearForm for sponsoring