# hoc-react-switcher

> React component which displays one of its possible states depending on a prop value

Latest version **1.0.0** (published 2016-12-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install hoc-react-switcher
pnpm add hoc-react-switcher
yarn add hoc-react-switcher
bun add hoc-react-switcher
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2016-12-12 |
| First published | 2016-12-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Yvonnick FRIN |
| Maintainers | yvonnick |
| Keywords | react, switcher, hoc |

## Links

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

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2016-12-12

## README

# hoc-react-switcher

[![CircleCI](https://circleci.com/gh/Zenika/hoc-react-switcher.svg?style=svg)](https://circleci.com/gh/Zenika/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**
```(jsx)
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,
})
```

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