# react-colander

> Colander for react components.

Latest version **0.1.5** (published 2017-04-22) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.5 |
| Published | 2017-04-22 |
| First published | 2017-04-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Dmitry Pavlov |
| Maintainers | by-keks |

## Links

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

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ^15.5.8
- [lodash.isequal](https://npm.io/package/lodash.isequal.md) ^4.5.0

## Recent versions

- 0.1.5 (latest) — 2017-04-22
- 0.1.2 — 2017-04-21
- 0.1.1 — 2017-04-21
- 0.0.8 — 2017-04-20
- 0.0.7 — 2017-04-07
- 0.0.5 — 2017-04-06
- 0.0.4 — 2017-04-06
- 0.0.3 — 2017-04-06
- 0.0.1 — 2017-04-06

## README

# React-colander

Simple flexible library for creating a prerender containers for react.

## Installation
    npm install react-colander

## Example

#### Pure React.js

#### `components/Profile.js`

```js
import React, { Component } from 'react'

class Profile extends Component {
  render() {
    if (!props.user) {
      return <UnauthorizedError />
    }
    if (props.fetching) {
      return <Spinner />
    }
    return ('...')
  }
}

export default Profile;
```

In this example, we cannot reuse conditional rendering, it'll repeat from component to component. Also all lifecycle methods will be call and we must use same expressions to ensure error-free code execution if props are missing.

#### React.js with react-colander


#### `colanders/isAuthorized.js`

```js
import React from 'react'
import { colander } from 'react-colander'

function isAuthorized (props) {
  if (!props.user) {
    return <UnauthorizedError />
  }
}
```

#### `colanders/Spinner.js`

```js
import React from 'react'
import { colander } from 'react-colander'

function Spinner (props) {
  if (props.fetching) {
    return <Spinner />
  }
}
```

#### `components/Profile.js`

```js
import React, { Component } from 'react'

import isAuthorized from 'colanders/isAuthorized'
import Spinner from 'colanders/Spinner'

class Profile extends Component {
  render() {
    return ('...')
  }
}

export default colander(Profile, [isAuthorized, Spinner]);
```

Now we've wrapped component into colander container. If some props are missing, colander will return the proper component instead of Profile. This helps prevent unwanted rendering, calls of component lifecycle methods and reuse colanders methods in other components.

### What are *colanders*?

Colanders are pure functions that takes the props of wrapped component and returns react node.

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