Add life cycle methods to stateless functional components, without the class noise.
npm install react-functionalAdd life cycle methods to stateless functional components,
without the class noise.
React 16 (use v2.0.0 for older versions)
``sh`
npm i --save react-functional
`javascript
import { React } from 'react'
import functional from 'react-functional'
function ComponentA(props) {
return
const options = {
shouldComponentUpdate: (props, nextProps) =>
props.name !== nextProps.name
}
export default functional(ComponentA, options)
`
`javascript
import { React } from 'react'
import functional from 'react-functional'
function ComponentA(props) {
return
ComponentA.shouldComponentUpdate = (props, nextProps) =>
props.name !== nextProps.name
export default functional(ComponentA)
`
`javascript
import { React } from 'react'
import functional from 'react-functional'
function shouldComponentUpdate(props, nextProps) {
return props.name !== nextProps.name
}
function render(props) {
return
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
`js
import { React } from 'react'
import functional from 'react-functional'
function ComponentA(props, cmp) {
return console.log(cmp.refs.name.value)}/>
}
const options = {
componentWillReceiveProps: (nextProps, cmp) =>
cmp.refs.name.value = nextProps.name
}
export default functional(ComponentA, options)
`
- propTypesdefaultProps
- 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)
-
`sh`
npm run cov
| File | % Stmts | % Branch | % Funcs | % Lines |
|-----------|----------|----------|----------|----------|
| All files | 100 | 100 | 100 | 100 |
`sh`
npm test
`sh
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
``
* react-stateless for inspiration and code
* nearForm for sponsoring