Grow

Note
    Transition components may not work in Yard it only show the props you can use with it. Feel free to playaround with this component in live editor.

Examples

Basic usage

Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem consequuntur libero laborum voluptatum deleniti aut perspiciatis illum velit. Placeat magnam quae odio ab in at, aut deserunt minima sed cupiditate.

Group usage

Icon Grow usage

API

Grow props

NameTypeDefaultDescription
children
react node
Children for collapseing
containerRef
ref
A ref to access an container element.
disableEnterTransition
boolean
falseFlag to allow the entering transition
disableExitTransition
boolean
falseFlag to allow the exiting transition
duration
number
400Object with 2 keys enter and exit needed for the timing function or a number for both of them
enableAppearTransition
boolean
falseFlag to allow the component mount transition for the first time
mountOnEnter
boolean
falseFlag to decide that the component should mount on th first tranition
onEnter
function
Function called just before starting the animation.
onEntered
function
Function called after animation.
onEntering
function
Function called just at the starting animation.
onExit
function
Function called just before the Exit animation
onExited
function
Function called after the Exited animation
onExiting
function
Function called at the Exiting animation.
overrides
custom
Lets you customize all aspects of the component.
timingFunction
'ease' | 'linear' | 'ease-in' | 'ease-out'
easeDescribes the timing function
unmountOnExit
boolean
falseThe component should unmount of the exiting transition
visible
boolean
trueRenders component in checked state.

You can check the implementation of the component for more details.

Grow exports

You can import this module like so:

import {Grow} from 'spaceweb/transitions/grow'

It exports the following components or utility functions:

  • Grow