Add life cycle methods to stateless functional components, without the class noise
MIT License
Add life cycle methods to stateless functional components, without the class noise.
React 16 (use v2.0.0 for older versions)
npm i --save react-functional
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)
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)
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})
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)
propTypes
defaultProps
displayName
(auto-detected from function names)componentWillMount(props)
componentDidMount(props, refs)
componentWillReceiveProps(props, nextProps, refs)
shouldComponentUpdate(props, nextProps, refs)
componentWillUpdate(props, nextProps, refs)
componentDidUpdate(props, prevProps, refs)
componentWillUnmount(props, refs)
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