https://github.com/daief/rc-if

A react component for writing if-else in render
https://github.com/daief/rc-if

elseif react react-component

Last synced: over 1 year ago
JSON representation

A react component for writing if-else in render

• Host: GitHub
• URL: https://github.com/daief/rc-if
• Owner: daief
• License: mit
• Created: 2019-06-27T03:25:03.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T01:12:15.000Z (over 3 years ago)
• Last Synced: 2025-01-21T12:25:46.808Z (over 1 year ago)
• Topics: elseif, react, react-component
• Language: TypeScript
• Homepage:
• Size: 668 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
## rc-if

[![Build Status](https://travis-ci.org/daief/rc-if.svg?branch=master)](https://travis-ci.org/daief/rc-if)

rc-if is a react component for writing if-else in render.

## Usage

Install.

```bash

$ npm install @axew/rc-if

# or

$ yarn add @axew/rc-if

```

Example.

```jsx

import { FI, If, ElseIf, Else } from '@axew/rc-if';

const App = () => {

  const { data, error, loading } = useFakeFetch('http://example.com');

  return (

    

      
Title - this is always visible

      

        

      

      

        

      

      

        

          

        

        

          

        

      

    

  );

};

```


## Types

```ts

interface RcIF extends React.SFC<{ show?: boolean }> {

  If: React.SFC<{ if?: boolean }>;

  ElseIf: React.SFC<{ elseIf?: boolean }>;

  Else: React.SFC;

}

declare const FI: RcIF;

```

### FI

The following components cannot work without FI wrapping. When use in nested, the following components can also be wrap.

| Property | Description            | Type    | Default |

| -------- | ---------------------- | ------- | ------- |

| show     | render children or not | boolean | true    |

### If

Render when if.

| Property | Description            | Type    | Default |

| -------- | ---------------------- | ------- | ------- |

| if       | render children or not | boolean | -       |

### ElseIf

Render when elseIf.

| Property | Description            | Type    | Default |

| -------- | ---------------------- | ------- | ------- |

| elseIf   | render children or not | boolean | -       |

### Else

Render when else.