Skip to main content

Fade

The Fade component is a utility in the Pearl UI library that provides a view with a fade transition. It can be used to hide and show content based on a boolean prop show.

Import#

import { Fade } from "pearl-ui";

Usage#

The Fade component can be used to hide and show content based on a boolean prop show. Here is a basic usage example:

<Fade show={isOpen}>  <Box mb="4" p="4" bgColor="teal" borderRadius="m" boxShadow="l">    <Text color="white">This is the content</Text>  </Box></Fade>

Changing transitions manually#

You can manually change the transitions of the Fade component by using the transition and exitTransition props. These props accept an object that defines the type, duration, and easing of the transition.

<Fade  show={isOpen}  transition={{ duration: 200 }}  exitTransition={{ duration: 0 }}>  <Box mb="4" p="4" bgColor="teal" borderRadius="m" boxShadow="l">    <Text color="white">This is the content</Text>  </Box></Fade>

Example#

Component Properties#

Supported Style Properties#

The Fade component composes the Box component, so you can pass all Box related props to it.

Additional Properties#

The Fade component also accepts the following additional props:

NameRequiredTypeDefaultDescription
showYesbooleanIf true, the content will be visible.