react-colander
v0.1.5
Published
Colander for react components.
Downloads
15
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
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.