npm

Need private packages and team management tools?Check out npm Orgs. »

react-functional

3.0.2 • Public • Published

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

install

npm i react-functional

Downloadsweekly downloads

230

version

3.0.2

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
Report a vulnerability