SOROUSH.DESIGN
Design SystemMarkdownStyled System

Zoom

Zooms one child in from nothing and out to nothing.

Source

Zooms one child in from nothing and out to nothing. The child holds a ref and takes a style - a ref-holding component, or a DOM element - and the transition draws 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 { Zoom } from '@soroush.tech/design-system/Zoom'

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

Examples

Default

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

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

Toggled

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

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

Unmounted

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

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