# react-render-when

> Conditionally render a component

Latest version **0.1.1** (published 2020-02-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-render-when
pnpm add react-render-when
yarn add react-render-when
bun add react-render-when
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2020-02-23 |
| First published | 2020-02-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 8.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Marios Antonoudiou |
| Maintainers | mariosant |

## Links

- npm: https://www.npmjs.com/package/react-render-when
- npm.io page: https://npm.io/package/react-render-when

## Dependencies (1)

- [ramda](https://npm.io/package/ramda.md) ^0.27.0

## Recent versions

- 0.1.1 (latest) — 2020-02-23

## README

# react-render-when

Conditionally render a component

[![NPM version](https://img.shields.io/npm/v/@mariosant/react-render-when.svg)](https://www.npmjs.com/package/@mariosant/react-render-when)

## Installation

Add `@mariosant/react-render-when` to your `package.json`.

```bash
$ npm install @mariosant/react-render-when
```

You can now import the module and use it like

```javascript
import {renderWhen, renderUnless} from '@mariosant/react-render-when';
```

## Usage

Both `renderWhen` and `renderUnless` take 2 parameters. A predicate function and a React component.

Check out the following example:

```
import {renderWhen} from '@mariosant/react-render-when';

const needsCowbell = ({cowbells}) => cowbells < 10;

const Advice = renderWhen(needsCowbell, () => <p>Needs more cowbell</p>)

<Advice cowbell={1} />    // will render
<Advice cowbell={100} />  // will not render
```

The predicate inverses when using `renderUnless`:

```
import {renderUnless} from '@mariosant/react-render-when';

const enoughCowbell = ({cowbells}) => cowbells >= 10;

const Advice = renderUnless(enoughCowbell, () => <p>Needs more cowbell</p>)

<Advice cowbell={1} />    // will render
<Advice cowbell={100} />  // will not render
```

## Meta

Marios Antonoudiou – [@marios_ant](https://twitter.com/marios_ant) – mariosant@sent.com

Distributed under the MIT license. [https://github.com/mariosant/react-render-when](https://github.com/mariosant/react-render-when)

## Contributing

1. Fork it (<https://github.com/mariosant/react-render-when/fork>)
2. Create your feature branch (`git checkout -b feature/fooBar`)
3. Commit your changes using a semantic commit message.
4. Push to the branch (`git push origin feature/fooBar`)
5. Create a new Pull Request

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