React Switch Case Condition


Declarative way to render components conditionally

Demo

Install

``
npm install --save react-switchcase-condition


OR

`js
import {
Switch,
Case,
Default,
} from 'react-switchcase-condition';

const Test1 = ({ text }) =>

const Demo = () => (

cond={false}
component={Test1}
componentProps={{ text: 'This will not be rendered', }}
/>
cond={true}
component={Test2}
componentProps={{ text: 'This will be render', }}
/>
component={Test3}
componentProps={{ text: 'This is the default render' }}
/>

);
`

Components

$3

Wrapper component to declare the Switch block. Its children must contain at least one Case and exact one Default component. The first Case whose cond is true will be rendered. If there is no cond-true Case, Default will be rendered.

$3

Declare a render case

| Prop Name | Type | Required | Default | Description |
|-----------|------|----------|---------|-------------|
| cond | bool | true | |Condition to determine render. Render if true and is the first Case in children list |
| component | React component | true | | Component to render if cond is true |
| componentProps | object | false | {} | Props passed to component to render if cond is true |

$3

Declare the default render case

| Prop Name | Type | Required | Default | Description |
|-----------|------|----------|---------|-------------|
| component | React component | true | | Component to render if there is no cond-true Case |
| componentProps | object | false | {} | Props passed to component` to render |

License

MIT