npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@permettezmoideconstruire/react-if

v3.3.0

Published

🌗 Render React components conditionally

Downloads

14

Readme

React If

npm badge Build Status Issues Status License Contact

Render React components conditionally.

What does this component do

Take a look at the following presentational component, which contains a commonly used pattern for conditional rendering:

const Bar = ({ name, age, drinkingAge }) => (
    <div>
        <Header />
        {
            age >= drinkingAge
                ? <span className="ok">Have a beer, {name}!</span>
                : <span className="not-ok">Sorry, {name}, you are not old enough.</span>
        }
        <Footer />
    </div>
)

With React-If you can rewrite this into a more readable, expressive format:

const Bar = ({ name, age, drinkingAge }) => (
    <div>
        <Header />
        <If condition={ age >= drinkingAge }>
            <Then><span className="ok">Have a beer, {name}!</span></Then>
            <Else><span className="not-ok">Sorry, {name}, you are not old enough.</span></Else>
        </If>
        <Footer />
    </div>
)

Delaying evaluation of children

It is important to note that, because JavaScript is an eagearly evaluated language, children of both the Then and Else component will be evaluated regardless of the value of the condition. Should that be an issue for performance reasons, one can wrap said children in a arrow function, to delay evaluation of the children, as in the following example:

const renderData = (data) => {
  val computed = /* expensive computation */
  return <span>Here is the result: {computed}</span>;
};

const Foo = ({ data }) => (
    <div>
        <If condition={false}>
            <Then>{() =>
              renderData(data)
            }</Then>
            <Else>
              Nothing to see here
            </Else>
        </If>
    </div>
)

By doing so, renderData will not be called in the above example.

Installing and usage

NPM:

npm install react-if

Bower:

bower install react-if

// ES2015
import { If, Then, Else, When, Unless } from 'react-if'

// CommonJS:
const { If, Then, Else, When, Unless } = require('react-if')

// Global
var If   = ReactIf.If
var Then = If.Then
var Else = If.Else
var When = If.When
var Unless = If.Unless

Examples

Shorthands: When and Unless

import React from 'react'
import { When, Unless } from 'react-if'

const someCondition = false

const Example = () => (
    <div>
        <When condition={ someCondition }>
            This will only be displayed, if the condition is TRUE
        </When>
    </div>
)

const AnotherExample = () => (
    <div>
        <Unless condition={ someCondition }>
            This will only be displayed, if the condition is FALSE
        </Unless>
    </div>
)

API

<If />

| Property | Type | | ------------- | ------- | | condition | Boolean |

If condition evaluates to true, renders the <Then /> block will be rendered, otherwise renders the <Else /> block. Either block may be omitted.

This component can contain any number of <Then /> or <Else /> blocks, but only the first block of the right type (either Then or Else, depending on the condition) will be rendered.

<Then />

Can contain any number of elements inside, which it renders as-is. It can also contain a function. Should not be used outside of an <If /> block. It will only be displayed, if parent If block's condition is true.

<Else />

Can contain any number of elements inside, which it renders as-is. It can also contain a function. Should not be used outside of an <If /> block. It will only be displayed, if parent If block's condition is false.

<When />

A shorthand for <If condition={...}><Then>...</Then></If>. The same rules apply to the child elements as with using the Then block.

<Unless />

A shorthand for <If condition={...}><Else>...</Else></If>. The same rules apply to the child elements as with using the Else block.

License

React If is released under the MIT license.