react-colander v0.1.5

React-colander

Simple flexible library for creating a prerender containers for react.

Installation

npm install react-colander

Example

Pure React.js

components/Profile.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

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

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

colanders/Spinner.js

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

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

components/Profile.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.