# render-if

> Convenient way to render React components

Latest version **0.1.1** (published 2016-04-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install render-if
pnpm add render-if
yarn add render-if
bun add render-if
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2016-04-03 |
| First published | 2016-02-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 144 |
| Author | Atticus White |
| Maintainers | atticoos |
| Keywords | react, react-native, render |

## Links

- npm: https://www.npmjs.com/package/render-if
- Repository: https://github.com/ajwhite/render-if
- Homepage: https://github.com/ajwhite/render-if#readme
- Issues: https://github.com/ajwhite/render-if/issues
- npm.io page: https://npm.io/package/render-if

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.1 (latest) — 2016-04-03
- 0.1.0 — 2016-02-21
- 0.0.5 — 2016-02-21
- 0.0.4 — 2016-02-05
- 0.0.3 — 2016-02-05
- 0.0.2 — 2016-02-05
- 0.0.1 — 2016-02-05

## README

# render-if
[![License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](https://npmjs.org/package/render-if)
[![NPM version](http://img.shields.io/npm/v/render-if.svg?style=flat)](https://npmjs.org/package/render-if)
[![Build Status](http://img.shields.io/travis/ajwhite/render-if.svg?style=flat)](http://travis-ci.org/ajwhite/render-if)

A tiny, yet conveniently curried way to render conditional React components. Works great with both React and React Native.

```js
renderIf(predicate)(element)
```



## What it looks like

`renderIf` is a curried function that takes a predicate and returns a function accepting an element that will only be returned if the predicate is satisfied.
The function returned by `renderIf` will also accept a parameterless function which will only be invoked if the predicate is satisfied, allowing for lazy evaluation of inner JSX.

```js
renderIf(1 + 1 === 2)(
  <Text>Hello World!</Text>
)
```

### As an in-line expression

```jsx
class MyComponent extends Component {
  render() {
    return (
      {renderIf(1 + 2 === 3)(
        <span>The universe is working</span>
      )}
    );
  }
}
```

### As a lazy in-line expression

```jsx
class MyComponent extends Component {
  render() {
    return (
      {renderIf(1 + 2 === 3)(() => (
        <span>This is only invoked if the universe is working</span>
      ))}
    );
  }
}
```

### As a named function

```jsx
class MyComponent extends Component {
  render() {
    const ifTheUniverseIsWorking = renderIf(1 + 2 === 3);
    return (
      {ifTheUniverseIsWorking(
        <span>The universe is still wroking</span>
      )}
    )
  }
}
```

### As a composed function
```jsx
const ifEven = number => renderIf(number % 2 === 0);
const ifOdd = number => renderIf(number % 2 !== 0);

class MyComponent extends Component {
  render() {
    return (
      {ifEven(this.props.count)(
        <span>{this.props.count} is even</span>
      )}
      {ifOdd(this.props.count)(
        <span>{this.props.count} is odd</span>
      )}
    );
  }
}
```

## What it no longer looks like

```jsx
class MyComponent extends Component {
  render() {
    var conditionalOutput;
    if (1 + 1 === 2) {
      conditionalOutput = <span>I am rendered!</span>;
    } else {
      conditionalOutput = <span>I am not rendered :(</span>;
    }
    return (
      <div>
        <!-- this works, but it can get ugly -->
        {conditionalOutput}
        {1 + 1 === 2 && <span>I am rendered!</span>}
        {this.anotherConditionalRender()}
      </div>
    );
  }
  anotherConditionalRender() {
    if (1 + 1 === 2) {
      return <span>I am rendered!</span>
    }
  }
}
```

---
_Source: https://npm.io/package/render-if · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._