Show

Used to conditionally show/hide components based on a Boolean value.

• View on Github

Anatomy

This component is a utility and does not render any DOM elements.

Import

import { Show } from '@pluralsight/react'

Usage

Basic

To conditionally render a component, pass a boolean value to the when prop. If the value is true, the children will be rendered. If the value is false, the fallback will be rendered.

function BasicExample() {
  const [loggedIn, setLoggedIn] = useState(false)

  function handleLogin() {
    setLoggedIn(true)
  }

  function handleLogout() {
    setLoggedIn(false)
  }

  return (
    <Show
      when={loggedIn}
      fallback={
        <Button onClick={handleLogin} type="button">
          Log In
        </Button>
      }
    >
      <Button onClick={handleLogout} sentiment="default" type="button">
        Log Out
      </Button>
    </Show>
  )
}

Behavior

There are no behaviors associated with this component.

API

Parameters

interface ShowProps {
  fallback?: NonNullable<ReactNode> | null
  when: boolean
}

1. fallback: A ReactNode to render when when is false.
2. when: A boolean value to determine whether to render the children or the fallback.

Accessibility

There is no special accessibility considerations for this component.