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.

Result

Loading...

Live Editor

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

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.