react-functional

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

$3

React 16 (use v2.0.0 for older versions)

``sh
npm i --save react-functional
`

functional(component)

$3

`javascript
import { React } from 'react'
import functional from 'react-functional'

function ComponentA(props) {
return

export default functional(ComponentA, options)
`

$3

`javascript
import { React } from 'react'
import functional from 'react-functional'

function ComponentA(props) {
return

export default functional(ComponentA)
`

$3

`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})
`

$3

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)

`

$3

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

$3

- 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

`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
``

Thanks

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