❤
npm
Sign UpSign In

react-ifs

0.1.4 • Public • Published

react-ifs

NPM

Build Status Coverage Status dependencies Known Vulnerabilities GitHub issues License: GPL v3 Keybase PGP

This package provides a simple conditional logic wrapper for React components. It exports a function component, If.

If requires a condition prop and either child elements or a then prop. It accepts optional else and unless props. It returns a single, unmodified prop value based on the combination of props it has received.

The package is intended as a reusable drop-in to clean up repetitive conditional assignments in dynamic React applications.

 

Install

npm i react-ifs

or

yarn add react-ifs

 

Import

import If from 'react-ifs';

 

API

If/children

<If condition={true}>
  <Foo />
</If>

<Foo /> will be returned. If the condition evaluates to false, null will be returned. If the condition evaluates to false, null will be returned.

 

If/then

<If condition={true} then={<Foo />} />

<Foo /> will be returned. As above, if the condition evaluates to false, null will be returned.

 

If/then + children → then overrides children

<If condition={true} then={<Foo />}>
  <Bar />
</If>

<Foo /> will be returned.

 

If/else

<If condition={false} then={<Foo />} else={<Bar />} />

<Bar /> will be returned.

 

If/else/unless

<If condition={false} then={<Foo />} else={<Bar />} unless={<Baz />} />

<Baz /> will be returned if it evaluates to truthy.

 

Examples

Login

Either a login form or a logout button is displayed depending on the loggedIn prop.

import React from 'react';
import If from 'react-ifs';
 
import LoginForm from './login-form';
import LogoutButton from './logout-button';
 
const Login = props => (
  <If condition={!props.loggedIn} else={<LogoutButton />}>
    <LoginForm />
  </If>
);
 
export default Login;

 

Access control

The content that renders depends on both subscribed and promotional props.

import React from 'react';
import If from 'react-ifs';
 
import Demo from './demo';
import MemberContent from './member-content';
 
const Page = props => {
  const trial = props.promotional ? <MemberContent /> : null;
 
  return (
    <If
      condition={props.subscribed}
      then={<MemberContent />}
      else={<Demo />}
      unless={trial}
    />
  );
};
 
export default Page;

 

Other conditional displays

One menu renders depending on the time_of_day prop.

import React from 'react';
import If from 'react-ifs';
 
import BreakfastMenu from './breakfast-menu';
import LunchMenu from './lunch-menu';
import DinnerMenu from './dinner-menu';
 
const Menu = props => (
  <>
    <If condition={props.time_of_day === 'morning'} then={<BreakfastMenu />} />
 
    <If condition={props.time_of_day === 'midday'} then={<LunchMenu />} />
 
    <If condition={props.time_of_day === 'evening'} then={<DinnerMenu />} />
  </>
);
 
export default Menu;

Readme

Keywords

Package Sidebar

Install

npm i react-ifs

Repository

github.com/CharmedSatyr/react-ifs

Homepage

github.com/CharmedSatyr/react-ifs#readme

Weekly Downloads

1

Version

0.1.4

License

GPL-3.0-or-later

Unpacked Size

42.1 kB

Total Files

4

Last publish

Collaborators

  • charmedsatyr
Try on RunKit
Report malware