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: about 2 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 (about 2 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

        
[![npm version](https://img.shields.io/npm/v/react-control-statements.svg?style=flat-square)](https://www.npmjs.com/package/react-control-statements)

[![Build Status](https://travis-ci.org/damaera/react-control-statements.svg?branch=master)](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

        

      

    );

  }

}

```