Show

The Show component is a utility isnpired by SolidJS for conditional rendering with smooth transitions. It displays its children based on the truthiness of the when prop, and can display a fallback component if when is false.

import { Show } from '@creation-ui/react'

In this example, we're using the Show component to conditionally render a "Log in" or "Log out" button based on whether the user is logged in. Here's how it works:

export const ShowExample = () => {
  const [loggedIn, setLoggedIn] = useState(false)
 
  const login = () => setLoggedIn(true)
  const logout = () => setLoggedIn(false)
 
  return (
    <Container variant='column'>
      <Show when={loggedIn} fallback={<Button onClick={login}>Log in</Button>}>
        <Button onClick={logout} variant={'outlined'}>
          Log out
        </Button>
      </Show>
    </Container>
  )
}

The when prop determines which content to display. The fallback pecifies what to display if when is false. In this case, it's a "Log in" button. If when is true the "Log out" button will be displayed.

<Show when={loggedIn} fallback={<Button onClick={login}>Log in</Button>}>
  <Button onClick={logout} variant={'outlined'}>
    Log out
  </Button>
</Show>

ShowFirstMatching

This wrapper will render the first child that matches the when prop. If no children match, it will render the fallback component - null by default.

import { ShowFirstMatching } from '@creation-ui/react'

Value "-1"is a negative number

<ShowFirstMatching fallback={<div>No match</div>}>
  <Show when={value < 0}>is a negative number</Show>
  <Show when={value >= 0 && value <= 5}>is between 0 and 5</Show>
  <Show when={value > 5}>is greater than 5</Show>
  {/* this will never render because the first matching is `x > 5` rule */}
  <Show when={value >= 15}>is greater than 15</Show>
</ShowFirstMatching>

Component API

Component props

Prop	Default	Description
`when`	—	`boolean` Condition to check
`fallback`	—	`React.ReactNode` Fallback component

Parent component props

Prop	Default	Description
`fallback`	`null`	`React.ReactNode` Fallback component
`children`	—	`React.ReactNode` Children of this component. Must be `Show` components. Each children will be checked for `when` property.

For Customisation