SOROUSH.DESIGN
Design SystemMarkdownStyled System

Grow

Grows one child in from a little smaller, fading as it does, and shrinks it out.

Source

Grows one child in from a little smaller, fading as it does, and shrinks it out. The child holds a ref and takes a style - a ref-holding component, or a DOM element - and the transition draws its opacity and its scale 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 { Grow } from '@soroush.tech/design-system/Grow'

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

Examples

Default

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

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

Toggled

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

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

Unmounted

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

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