Collapse

Conditionally hide or show content with a collapse animation.

import {QCollapse} from "@qui/react"

Examples

Expand from the start edge of the child element.

I'm a collapsible section

import {ReactNode, useState} from "react"

import {QButton, QCollapse} from "@qui/react"

export default function Showcase(): ReactNode {
  const [showing, setShowing] = useState(true)

  const toggle = () => {
    setShowing((prevState) => !prevState)
  }

  return (
    <div className="flex flex-col items-center">
      <QCollapse className="q-body-s" in={showing}>
        I'm a collapsible section
      </QCollapse>
      <QButton className="mt-4" color="primary" onClick={toggle} variant="fill">
        Click me to {showing ? "Hide" : "Show"}
      </QButton>
    </div>
  )
}

Name & Description	Option(s)	Default
addEndListener Add a custom transition end trigger. Called with the transitioning DOM node and a done callback. Allows for more fine-grained transition end logic. Note: Timeouts are still used as a fallback if provided.	( node: HTMLElement \| object, done: () => void, ) => void
appear Whether to show the animation when the component is first mounted.	boolean
children React Children	ReactNode
className Class applied to the root element.	string
collapsedSize Minimum size of the component. If supplied as a number, the value will be converted into pixels.	\| string \| number
easing The transition timing function. You may specify a single easing or an object containing independent values for enter and exit.	\| string \| { enter: string exit: string }
fade If true, the component will also fade in and out.	boolean
in Show the component; triggers the enter or exit states	boolean
innerWrapperProps Props for the element that wraps the children.	Omit< DetailedHTMLProps< HTMLAttributes<HTMLDivElement>, HTMLDivElement > >
mountOnEnter By default, the child component is mounted immediately along with the parent Transition component. If you want to "lazy mount" the component on the first in = `true` you can set mountOnEnter. After the first enter transition the component will stay mounted, even on "exited", unless you also specify unmountOnExit.	boolean
nodeRef A React reference to DOM element that need to transition. example. When `nodeRef` prop is used, node is not passed to callback functions (e.g. onEnter) because user already has direct access to the node. When changing `key` prop of `Transition` in a `TransitionGroup` a new `nodeRef` needs to be provided to `Transition` with changed `key` prop. see also.	Ref<HTMLElement>
onEnter Callback fired before the "entering" status is applied. An extra parameter `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount	( node: HTMLElement \| object, isAppearing: boolean, ) => void
onEntered Callback fired after the "entered" status is applied. An extra parameter isAppearing is supplied to indicate if the enter stage is occurring on the initial mount	( node: HTMLElement \| object, isAppearing: boolean, ) => void
onEntering Callback fired after the "entering" status is applied. An extra parameter isAppearing is supplied to indicate if the enter stage is occurring on the initial mount	( node: HTMLElement \| object, isAppearing: boolean, ) => void
onExit Callback fired before the "exiting" status is applied.	( node: HTMLElement \| object, ) => void
onExited Callback fired after the "exited" status is applied.	( node: HTMLElement \| object, ) => void
onExiting Callback fired after the "exiting" status is applied.	( node: HTMLElement \| object, ) => void
style Inline styles	CSSProperties
timeout The duration of the transition, in milliseconds. If supplied as 'auto', the duration will be computed based on the height of the component's child element.	\| number \| 'auto' \| { appear?: number enter?: number exit?: number }
unmountOnExit By default, the child component stays mounted after it reaches the 'exited' state. Set `unmountOnExit` if you'd prefer to unmount the component after it finishes exiting.	boolean

Add a custom transition end trigger. Called with the transitioning DOM node and a done callback. Allows for more fine-grained transition end logic. Note: Timeouts are still used as a fallback if provided.

appear

Type

boolean

Description

Whether to show the animation when the component is first mounted.

children

Type

ReactNode

Description

React Children

className

Type

string

Description

Class applied to the root element.

collapsedSize

Type

| string
| number

Description

Minimum size of the component. If supplied as a number, the value will be converted into pixels.

easing

Type

| string
| {
    enter: string
    exit: string
  }

Description

The transition timing function. You may specify a single easing or an object containing independent values for enter and exit.

fade

Type

boolean

Description

If true, the component will also fade in and out.

Type

boolean

Description

Show the component; triggers the enter or exit states

innerWrapperProps

Type

Omit<
  DetailedHTMLProps<
    HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
  >
>

Description

Props for the element that wraps the children.

mountOnEnter

Type

boolean

Description

By default, the child component is mounted immediately along with the parent Transition component. If you want to "lazy mount" the component on the first in = true you can set mountOnEnter. After the first enter transition the component will stay mounted, even on "exited", unless you also specify unmountOnExit.

nodeRef

Type

Ref<HTMLElement>

Description

A React reference to DOM element that need to transition. example. When nodeRef prop is used, node is not passed to callback functions (e.g. onEnter) because user already has direct access to the node. When changing key prop of Transition in a TransitionGroup a new nodeRef needs to be provided to Transition with changed key prop. see also.

onEnter

Type

(
  node: HTMLElement | object,
  isAppearing: boolean,
) => void

Description

Callback fired before the "entering" status is applied. An extra parameter isAppearing is supplied to indicate if the enter stage is occurring on the initial mount

onEntered

Type

(
  node: HTMLElement | object,
  isAppearing: boolean,
) => void

Description

Callback fired after the "entered" status is applied. An extra parameter isAppearing is supplied to indicate if the enter stage is occurring on the initial mount

onEntering

Type

(
  node: HTMLElement | object,
  isAppearing: boolean,
) => void

Description

Callback fired after the "entering" status is applied. An extra parameter isAppearing is supplied to indicate if the enter stage is occurring on the initial mount

onExit

Type

(
  node: HTMLElement | object,
) => void

Description

Callback fired before the "exiting" status is applied.

onExited

Type

(
  node: HTMLElement | object,
) => void

Description

Callback fired after the "exited" status is applied.

onExiting

Type

(
  node: HTMLElement | object,
) => void

Description

Callback fired after the "exiting" status is applied.

style

Type

CSSProperties

Description

Inline styles

timeout

Type

| number
| 'auto'
| {
    appear?: number
    enter?: number
    exit?: number
  }

Description

The duration of the transition, in milliseconds. If supplied as 'auto', the duration will be computed based on the height of the component's child element.

unmountOnExit

Type

boolean

Description

By default, the child component stays mounted after it reaches the 'exited' state. Set unmountOnExit if you'd prefer to unmount the component after it finishes exiting.

Tooltip

Slide

Collapse

Examples

API

Props