https://github.com/damaera/react-control-statements
Neater control statements (if/for) for react, as a component
https://github.com/damaera/react-control-statements
conditional-statements control-statements for if-else react react-component statement
Last synced: 3 months ago
JSON representation
Neater control statements (if/for) for react, as a component
- Host: GitHub
- URL: https://github.com/damaera/react-control-statements
- Owner: damaera
- License: mit
- Created: 2017-04-13T07:31:28.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-09-25T12:57:25.000Z (over 7 years ago)
- Last Synced: 2025-04-04T02:02:48.078Z (3 months ago)
- Topics: conditional-statements, control-statements, for, if-else, react, react-component, statement
- Language: JavaScript
- Homepage:
- Size: 60.5 KB
- Stars: 11
- Watchers: 0
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/react-control-statements)
[](https://travis-ci.org/damaera/react-control-statements)There's no built-in looping and conditional syntax in React. This library adds the syntactic sugar to write looping and conditionals as component.
Inspired by [jsx control statements](https://www.npmjs.com/package/jsx-control-statements)## Install
```
npm install --save react-control-statements
```## Usage
### If
The body of the if statement only gets evaluated if condition is true.
```jsx
import React, { Component } from 'react'
import { If } from 'react-control-statements'class YourComponent extends Component {
render() {
Truth
}
}
```### Choose
This is an alternative syntax for more complex conditional statements.
```jsx
import React, { Component } from 'react'
import { Choose, When, Otherwise } from 'react-control-statements'class YourComponent extends Component {
render() {
return (
IfBlock
ElseIfBlock
Another ElseIfBlock
...
ElseBlock
);
}
}
```### For
For syntax.
```jsx
import React, { Component } from 'react'
import { For } from 'react-control-statements'class YourComponent extends Component {
render() {
return (
$item.title
);
}
}
```