https://github.com/pixcai/react-then-else
Render component with condition in React
https://github.com/pixcai/react-then-else
Last synced: about 1 month ago
JSON representation
Render component with condition in React
- Host: GitHub
- URL: https://github.com/pixcai/react-then-else
- Owner: pixcai
- License: gpl-3.0
- Created: 2017-01-11T20:30:39.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-01-17T17:25:23.000Z (over 8 years ago)
- Last Synced: 2025-06-20T00:36:37.088Z (4 months ago)
- Language: JavaScript
- Size: 181 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-then-else
Render component with condition in React
This component turns this
```javascript
render() {
return (
{this.renderBody()}
);
},
renderBody() {
return (this.props.age >= this.props.drinkingAge)
? Have a beer, {this.props.name}!
: Sorry {this.props.name } you are not old enough.;
}
```
into this
```javascript
render() {
return (
= this.props.drinkingAge }>
Have a beer, {this.props.name}!
Sorry, {this.props.name}, you are not old enough.
);
}
```
## Install
### NPM:
npm install react-then-else
## Example
```javascript
import React from 'react';
import { If, Then, Else } from 'react-then-else';
class Beer extends React.Component {
render() {
return (
= 16 } tag='header'>
Have a beer, {this.props.name}!
Sorry, {this.props.name}, you are not old enough.
One more
= 15 }>
You are 15 years old
You always see me!
);
}
});
```
```javascript
// ES2015
import { If, Then, Else } from 'react-then-else';
// CommonJS:
const { If, Then, Else } = require('react-then-else');
```
## API
### <If />
| Property | Type |
| ---------------- | ------------------- |
| `condition` | Boolean |
| `tag` | String or Function |
| any others props | Any Type |
If `condition` evaluates to `true`, renders the `` block will be rendered, otherwise renders the `` block. Either block may be omitted.
Default, `` and `` and `` will wrap children in `div` tag, if you want wrap it in others html tag, you can set property `tag` to your tag name, e.g. `` or `` or ``
This component can contain any number of `` or `` blocks, and you can containe `` in the `` or `` blocks.
### <Then />
If `condition` evaluates to `true`, renders it.
### <Else />
If `condition` evaluates to `false`, renders it.
## License
GPL-3.0