FredrikOseberg / react-conditionally-render

Introduction

Readability is important, and conditional renders often introduce a complexity that make it difficult to follow what is going on. This component aims to solve that by creating a readable interface in the form of a react component

Usage

Simple usage:

import Profile from './Profile'
import AnonymousProfile from './AnonymousProfile'

<ConditionallyRender
  condition={loggedIn}
  show={<Profile />}
  elseShow={<AnonymousProfile />}
/>

Usage with functions:

import Profile from './Profile'
import AnonymousProfile from './AnonymousProfile'

const renderProfile = () => {
 return <Profile />
}

const renderAnonymousProfile = () => {
    return <AnonymousProfile />
}

<ConditionallyRender
  condition={loggedIn}
  show={renderProfile}
  elseShow={renderAnonymousProfile}
/>