Skip to content
Home

Visibility

Info
Properties

Description

The Visibility component makes it possible to show or hide components on the screen based on the state of data. It can either be fed with the values directly via props, or it can read data from a surrounding DataContext.Provider and show or hide components based on the data it points to.

Demos

Direct properties

This is visible
<Visibility visible={true}>This is visible</Visibility>

False (not visible)

<Visibility

  visible={

    {

      foo: 'foo',

    }.foo === 'bar'

  }

>

  This is not visible

</Visibility>

Based on DataContext

This will show, as long as `toBe` is true.

<DataContext.Context.Provider

  value={{

    ...defaultContextState,

    data: {

      toBe: true,

      notToBe: false,

    },

  }}

>

  <Visibility pathTrue="/toBe">

    <P>This will show, as long as `toBe` is true.</P>

  </Visibility>

  <Visibility pathTrue="/notToBe">

    <P>This will not show until `notToBe` is true.</P>

  </Visibility>

</DataContext.Context.Provider>