hoc-react-switcher

what is this?

This is a higher order component ("HOC") which displays one of its possible states depending on a prop value.

install

npm i --save hoc-react-switcher

use

You have to give a map of components and optionally some other informations:

Parameter	Required	Default value	Description
prop	no	state	The prop to watch. It determines which component to display
states	yes	{}	A map of components
DefaultComponent	no	undefined	A component to display when prop value doesn't match one of the states

Component.js

import React, { PropTypes } from 'react'
import switcher from 'hoc-react-switcher'

const FirstComponent = () => {
  return (
    <div>
      FirstComponent
    </div>
  )
}

const SecondComponent = () => {
  return (
    <div>
      SecondComponent
    </div>
  )
}

const DefaultComponent = () => {
  return (
    <div>
      DefaultComponent
    </div>
  )
}

export default switcher({
  prop: 'custom',
  states: {
    0: FirstComponent,
    1: SecondComponent
  },
  DefaultComponent,
})