react-conditionally-render

Reduce mental overhead by wrapping conditional logic in a react component

Usage no npm install needed!

<script type="module">
  import reactConditionallyRender from 'https://cdn.skypack.dev/react-conditionally-render';
</script>

README

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}
/>