Grow

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

Demos

For usage examples, visit the component demo page: Grow

Import

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

Props

Prop	Type	Default	Description
`children`	`ReactElement`	-	The one element that moves.
`isShown`	`boolean`	`false`	Whether the child is shown.
`shouldAppear`	`boolean`	`true`	Moves on the first render too, when shown.
`shouldMountOnEnter`	`boolean`	`false`	Keeps the child out of the tree until it is first shown.
`shouldUnmountOnExit`	`boolean`	`false`	Takes the child out of the tree once it is out.
`timeout`	`number	{ enter: number; exit: number }`	`theme.transitions.duration.standard`
`easing`	`keyof Theme['transitions']['easing']`	`'standard'`	Which easing of the theme it moves by.
`onEnter`, `onEntering`, `onEntered`	`(node: HTMLElement) => void`	-	Fired before it moves in, as it starts to, and when it is in.
`onExit`, `onExiting`, `onExited`	`(node: HTMLElement) => void`	-	Fired before it moves out, as it starts to, and when it is out.

Time and easing

The time and the easing come from theme.transitions - duration (short, standard, long) and easing (standard, enter, exit) - so a theme changes how everything moves in one place.

Source code

If this page does not answer your question, have a look at the implementation of the component for more detail.