Collapse

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.

Basic width 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.

Dropdown usage

Show More Content

Accordian usage

Group usage

Icon Collapse usage

API

Collapse props

NameTypeDefaultDescription
children
react node
Children for collapsing
collapsedSize
number
0The width (horizontal) or height (vertical) of the container when collapsed. Will default to 0 when unmountOnExit is true
containerRef
ref
A ref to access an container element.
dimension
'height' | 'width'
heightDirection of collapse in component (Keep width fixed for width dimension to work Collapse component needs to decide what will be the width of the component to know till what size it need to exapand )
disableEnterTransition
boolean
falseFlag to allow the entering transition
disableExitTransition
boolean
falseFlag to allow the exiting transition
duration
number
300Duration of animation
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.

Collapse exports

You can import this module like so:

import {Collapse} from 'spaceweb/transitions/collapse'

It exports the following components or utility functions:

  • Collapse