react-rif (aka rif or R)

React-rif is a simple React component that tries to kind of mimic AngularJS ng-if functionality . Main function to offer is conditional rendering. There are few similar components available but aim here was to create as short component as possible.

Conditional Rendering prevents components to be either added to the DOM or not. Those that aren't supposed to be rendered are therefore not in DOM and application should run faster as there are less elements to be diffed by React.

Install

npm install react-rif

Usage

Usage is really easy. Just import the component and wrap your elements with R. You should provide a boolean value to tell R whether to render children or not.

import {R} from 'react-rif';

export function MyReactComponent(): JSX.Element {
  // this can be function call or e.g. value from react-window-info-hook
  // here we use just a flag to hide our component.
  const showMyComponent = false; 
  
  return (
    <>
      <R if={showMyComponent}>
        <MyFancyComponent />
      </R>
    </>
  );
}

Props

Component takes in following properties:

interface IRIfProps {
  if: boolean;
  children?: React.ReactNode;
}

• if is the flag to render child components or not.
• Children are all the child components wrapped by this component. You don't need to pass it separately since React will figure this out for you. If you don't wrap anything you will see a console warning.

License

Released under MIT license.

© 2019 Janne Hämäläinen.