@mariosant/package-name
v0.0.1
Published
write-your-description-here
Downloads
1
Readme
react-render-when
Conditionally render a component
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_ant – mariosant@sent.com
Distributed under the MIT license. https://github.com/mariosant/react-render-when
Contributing
- Fork it (https://github.com/mariosant/react-render-when/fork)
- Create your feature branch (
git checkout -b feature/fooBar
) - Commit your changes using a semantic commit message.
- Push to the branch (
git push origin feature/fooBar
) - Create a new Pull Request