Slide

Slides one child in from an edge of the window and back out.

Demos

For usage examples, visit the component demo page: Slide

Import

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

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.
`direction`	`'up'	'down'	'left'
`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.

Where it comes from

The distance it moves is measured as it starts - from where the child sits to the outside of the window - so it leaves the window from wherever it is. A child that moves is measured in its place, not where a move left it.

Source code

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