https://github.com/hc-oss/control-statements
Clean way to write loops and conditions in JSX ✨
https://github.com/hc-oss/control-statements
conditions loops ng-if reactjs
Last synced: 2 months ago
JSON representation
Clean way to write loops and conditions in JSX ✨
- Host: GitHub
- URL: https://github.com/hc-oss/control-statements
- Owner: hc-oss
- License: mit
- Created: 2019-02-27T09:46:43.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-09-23T07:11:10.000Z (almost 7 years ago)
- Last Synced: 2025-06-12T06:06:20.496Z (about 1 year ago)
- Topics: conditions, loops, ng-if, reactjs
- Language: JavaScript
- Homepage:
- Size: 105 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/control-statements)
[](https://travis-ci.org/harshzalavadiya/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.
Fork of [react control statements](https://www.npmjs.com/package/react-control-statements) but with `` implementation
## Free Advise
If you are coming from non-jsx background you might think this package is a good start but in reality 🤫 *this package is not needed at all.*
because, it's easy to replicate this scenarios with pure ES6+, I'm putting some examples that might help you for getting started.
### Pure React Conditional Statements
[](https://codesandbox.io/s/peaceful-bhaskara-q35fy?fontsize=14)
```jsx
import React from "react";
export default function PureReactExamples() {
const foo = true;
const fruits = ["🍇 Grapes", "🍈 Melon", "🍌 Banana"];
return (
<>
Simple If without Else
{foo && Yay, Foo is true
}
Simple If with Else
{foo ? Yay, Foo is true
: Whoa, Foo is false
}
Loop Example
{fruits.map((fruitName, index) => (
{fruitName}
))}
>
);
}
```
---
## Install
```
npm install --save 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 "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 "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 "control-statements";
class YourComponent extends Component {
render() {
return (
$item.title
);
}
}
```