SOROUSH.DESIGN
Design SystemMarkdownStyled System

Fade

Fades one child in and out by its opacity. The child holds a ref and takes a style - a ref-holding component, or a DOM element - and the transition draws its opacity on it.

Source

Fades one child in and out by its opacity. The child holds a ref and takes a style - a ref-holding component, or a DOM element - and the transition draws its opacity on it. Out, the child is hidden, so it takes no click or focus. A user who asked for less motion (prefers-reduced-motion: reduce) sees it change at once, and the callbacks still fire.

import { Fade } from '@soroush.tech/design-system/Fade'

;<Fade isShown={isOpen}>
  <Paper p={3}>Content</Paper>
</Fade>

Examples

Default

const args: Partial<FadeProps> = { isShown: true }

<Fade {...args}>{surface}</Fade>

Toggled

const args: Partial<FadeProps> = { isShown: true }

<TransitionToggle>
  {(isShown) => (
    <Fade {...args} isShown={isShown}>
      {surface}
    </Fade>
  )}
</TransitionToggle>

Unmounted

const args: Partial<FadeProps> = { isShown: true }

<TransitionToggle>
  {(isShown) => (
    <Fade {...args} isShown={isShown} shouldMountOnEnter shouldUnmountOnExit>
      {surface}
    </Fade>
  )}
</TransitionToggle>