@mariosant/react-render-when
TypeScript icon, indicating that this package has built-in type declarations

0.1.4 • Public • Published

react-render-when

Conditionally render a component

NPM version

Installation

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

$ npm install @mariosant/react-render-when

You can now import the module and use it like

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_antmariosant@sent.com

Distributed under the MIT license. 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

Readme

Keywords

none

Package Sidebar

Install

npm i @mariosant/react-render-when

Weekly Downloads

0

Version

0.1.4

License

MIT

Unpacked Size

8.21 kB

Total Files

15

Last publish

Collaborators

  • mariosant