# react-renderif

> Conditional rendering of React components

Latest version **1.0.2** (published 2015-08-18) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-renderif
pnpm add react-renderif
yarn add react-renderif
bun add react-renderif
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2015-08-18 |
| First published | 2015-07-02 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Eric Peterson |
| Maintainers | elpete |
| Keywords | react-component, react, control-flow, conditional-rendering |

## Links

- npm: https://www.npmjs.com/package/react-renderif
- Repository: https://github.com/ericlynnpeterson/react-renderif
- Issues: https://github.com/ericlynnpeterson/react-renderif/issues
- npm.io page: https://npm.io/package/react-renderif

## Dependencies (1)

- [react](https://npm.io/package/react.md) ^0.13.3

## 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

- 1.0.2 (latest) — 2015-08-18
- 1.0.1 — 2015-07-17
- 1.0.0 — 2015-07-02

## README

# react-renderif

### Installation
```js
npm install react-renderif
```

### Usage
```jsx
var React = require('react');
var RenderIf = require('react-renderif');

/**
 * Test if a value exists
 * (Essentially, test if the value is truthy.)
 *
 * @prop exists
 * @type {React.PropTypes.any}
 */
<RenderIf exists={existsVariable}>
    <h1>Rendered</h1>
</RenderIf>

/**
 * Test if a value does not exists
 * (Essentially, test if the value is falsey.)
 *
 * @prop notExists
 * @type {React.PropTypes.any}
 */
<RenderIf notExists={existsVariable}>
    <h1>Rendered</h1>
</RenderIf>

/**
 * Test if a value is true
 * (The value must === true, not just be truthy)
 * (Use 'exists' for truthy checks.)
 *
 * @prop isTrue
 * @type {React.PropTypes.bool}
 */
<RenderIf isTrue={trueVariable}>
    <h1>Rendered</h1>
</RenderIf>

/**
 * Test if a value is false
 * (The value must === false, not just be falsey.)
 * (Use 'notExists' for falsey checks.)
 *
 * @prop isFalse
 * @type {React.PropTypes.bool}
 */
<RenderIf isFalse={falseVariable}>
    <h1>Rendered</h1>
</RenderIf>
        
/**
 * Test if a passed in expression is true.
 * The expression must evaluate to a truthy or falsey value.
 * (This property is essentially the same as 'exists' or 'notExists'.)
 * (It can make your component more readable in some situations.)
 *
 * @prop expression
 * @type {React.PropTypes.any}
 */
<RenderIf expression={1 === 1}>
    <h1>Rendered</h1>
</RenderIf>

/**
 * Test if a passed in callback returns true.
 * The callback must return a truthy or falsey value.
 *
 * @prop callback
 * @type {React.PropTypes.func}
 */
<RenderIf callback={function() { return 1 === 1; }}>
    <h1>Rendered</h1>
</RenderIf>
```

### Custom Matchers
***react-renderif*** allows you to create a custom wrapper component with a callback prebound.
This callback will be passed a `property` prop that can be used if you desire. 

```jsx
var React = require('react');
var RenderIf = require('react-renderif');

var RenderIfFoo = RenderIf.createCustomMatcher(function(property) {
    return property === 'foo';
});

// ...
<RenderIfFoo property={'foo'}>
    <h1>Rendered</h1>
</RenderIfFoo>
// ...
```

### Testing / Building / Contributing
```js
// Testing
npm test

// Building
npm install
npm run build
```

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