# react-functional

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

Latest version **3.0.2** (published 2018-05-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-functional
pnpm add react-functional
yarn add react-functional
bun add react-functional
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.2 |
| Published | 2018-05-30 |
| First published | 2015-12-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 12.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 90 |
| Author | David Mark Clements |
| Maintainers | davidmarkclements, tomitrescak |
| Keywords | react, stateless, functional, component |

## Links

- npm: https://www.npmjs.com/package/react-functional
- Repository: https://github.com/davidmarkclements/react-functional
- Homepage: https://github.com/davidmarkclements/react-functional#readme
- Issues: https://github.com/davidmarkclements/react-functional/issues
- npm.io page: https://npm.io/package/react-functional

## Dependencies (1)

- [create-react-class](https://npm.io/package/create-react-class.md) ^15.6.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.0.2 (latest) — 2018-05-30
- 3.0.1 — 2018-02-21
- 3.0.0 — 2018-02-21
- 2.0.0 — 2016-08-13
- 1.2.0 — 2015-12-27
- 1.1.1 — 2015-12-18
- 1.1.0 — 2015-12-18
- 1.0.2 — 2015-12-17
- 1.0.1 — 2015-12-17
- 1.0.0 — 2015-12-17

## README

# 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)

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

## functional(component)

### Pass life cycle methods as an options object

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

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

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

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

```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](http://npmjs.com/react-stateless) for inspiration and code
* [nearForm](http://nearform.com) for sponsoring

---
_Source: https://npm.io/package/react-functional · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._