# react-controllers

> Utilities for creating React controller components

Latest version **0.2.1** (published 2018-08-31) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2018-08-31 |
| First published | 2017-05-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 144.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | James K Nelson |
| Maintainers | jamesknelson |
| Keywords | react, controller, controllers, renderprop, renderprops |

## Links

- npm: https://www.npmjs.com/package/react-controllers
- npm.io page: https://npm.io/package/react-controllers

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

- 0.2.1 (latest) — 2018-08-31
- 0.1.3-beta.2 (dev) — 2017-09-12
- 0.2.0 — 2018-08-31
- 0.1.4 — 2017-09-12
- 0.1.3 — 2017-09-12
- 0.1.3-beta.1 — 2017-09-12
- 0.1.2 — 2017-08-26
- 0.1.1 — 2017-05-21
- 0.1.0 — 2017-05-21

## README

react-controllers
=================

Utilities for working with React controller components.

[![npm version](https://img.shields.io/npm/v/react-controllers.svg)](https://www.npmjs.com/package/react-controllers)

```sh
npm install react-controllers --save
```

## React Controllers

A [controller](https://frontarm.com/articles/controller-components/) is a term for a React components that follow three rules:

- It expects to receive a **render function** via its `children` prop
- It passes an **output object** to that render function
- It does not define `shouldComponentUpdate` or `PureComponent`

For example:

```jsx
render() {
  return (
    <AuthController>
      {output =>
        <div className="identity">{output.name}</div>
      }
    </AuthController>
  )
}
```

Some common controllers include the `<Consumer>` component of React's [Context API](https://reactjs.org/docs/context.html#consumer), and the `<Route>` component from [react-router 4](https://reacttraining.com/react-router/web/api/Route/children-func).

## `<Combine>`

When composing a number of controllers, you'll encounter the **controller mountain** problem: whitespace starts stacking up in a way reminiscent of callback pyramids.

```js
<AuthController>
  {auth =>
    <NavContext.Consumer>
      {nav =>
        <StoreContext.Consumer>
          {store =>
            <MyScreen auth={auth} nav={nav} store={store} />
          }
        </StoreContext.Consumer>
      }
    </NavContext.Consumer>
  }
</AuthController>
```

The `<Combine>` controller solves this by combining controllers together.

Each prop for `<Combine>` should be a function that returns a controller element. It then threads the outputs of each controller into the output of its own `children` function. For example, the above could be rewritten as:

```js
import { Combine } from 'react-controllers'

<Combine
  auth={children => <AuthController children={children} />}
  nav={children => <NavContext.Consumer children={children} />}
  store={children => <StoreContext.Consumer children={children} />}
>
  {output =>
    <MyScreen {...output} />
  }
</Combine>
```

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