Skip to content
Home

Visibility

Info
Demos
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>

Properties

PropertyTypeDescription
visibleboolean(optional) Control visibility directly by boolean value.
pathDefinedstring(optional) Given data context path must be defined to show children.
pathUndefinedstring(optional) Given data context path must be undefined to show children.
pathTruthystring(optional) Given data context path must be truthy to show children.
pathFalsystring(optional) Given data context path must be falsy to show children.
pathTruestring(optional) Given data context path must be true to show children.
pathFalsestring(optional) Given data context path must be false to show children.
inferDatafunction(optional) Will be called to decide by external logic, and show/hide contents based on the return value.
childrenReact.Node(required) Contents.