hoc-react-switcher

1.0.0 • Public • Published

hoc-react-switcher

CircleCI

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,
})

Readme

Keywords

Package Sidebar

Install

npm i hoc-react-switcher

Weekly Downloads

84

Version

1.0.0

License

MIT

Last publish

Collaborators

  • yvonnick