<Collapse> Component

<Collapse> is a non-visual container with dynamic visibility (show/hide) in sliding fashion.
You need to place <YourComponent> inside the <Collapse> in order to make the appearance.

Here the demo:

Preview
<YourComponent>
<YourComponent>

Installing <Collapse> Component

There are 2 ways to install <Collapse> component into your react app project:

  • Install the Specific Package of <Collapse> Component
  • Install the Whole Reusable-UI Component Pack, including the <Collapse> Component

expanded Property

Expands/Collapses the <Collapse>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview

<Collapse expanded={true}> 

<YourComponent>

Show code

orientation Property

Sets the orientation of the <Collapse>.

The possible values are:

  • undefined
  • 'inline'
  • 'block'

Here the preview:

Preview
<YourComponent>
<YourComponent>

Show code

lazy Property

Determines whenever the <Collapse>'s children should be rendered or not when the <Collapse expanded={false}>.

The possible values are:

  • undefined
  • false
  • true

Floating Properties

Determines how the <Collapse> should be floating on the target DOM reference.

floatingOn Property

Determines the target DOM reference where the <Collapse> should be floating on.
If not set (undefined), the <Collapse> becomes a normal element flow.

Here the preview:

Preview
<YourComponent>
<YourComponent>

Show code

floatingPlacement Property

Determines the location where the <Collapse> should be floating on the target DOM reference.

Here the preview:

floatingPlacement='top'
<YourComponent />

floatingStrategy Property

Determines the technical strategy how the <Collapse> can float.
In most cases, you should not worry about the detail mechanism how the <Collapse> can float.

The possible values are:

  • undefined
  • 'absolute'
  • 'fixed'

floatingAutoFlip Property

Automatically flips the floatingPlacement to opposite direction when the <Collapse> is about to be clipped.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview
<YourComponent>

Show code

floatingAutoShift Property

Automatically shifts the floatingPlacement to nearest safe position when the <Collapse> is about to be clipped.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview
<YourComponent>

Show code

floatingOffset Property

The distance (in pixel) between the <Collapse> and the target DOM reference.

The possible values are:

  • undefined
  • 0
  • positive number
  • negative number

Here the preview:

Preview

<Collapse floatingOffset={0}>

<YourComponent>
<YourComponent>

Show code

floatingShift Property

The distance (in pixel) between the <Collapse> and the default floatingPlacement location.

The possible values are:

  • undefined
  • 0
  • positive number
  • negative number

Here the preview:

Preview

<Collapse floatingShift={0}>

<YourComponent>
<YourComponent>

Show code

onFloatingUpdate Property

Sets a callback function to be called when the <Collapse> updates the position relative to the target DOM reference.

The callback function parameters:

  • event: FloatingPosition

Variables

There are several variables of <Collapse> you can customize. Changing the variables affects all <Collapse> instance and other components that depend on <Collapse>.

Here the exposed variables:

  • Animations

The example of accessing, modifying, & adding variables:

Show code