Collapse · Glowup

FEEDBACK · 72 / 89

Collapse

Collapse — a Material You feedback component for React Native and web.

󱀫

packages/ui/src/components/Collapse.tsx

Live demo

󰄜

360

󰓶

720

󰍹

Full

Properties

3 controls

Collapsed Height

Duration (ms)

Fade

Usage

Collapse.tsx

Variants

The states and shapes this component is meant to be used in.

Open and closed

open

Invoices are issued on the first working day of each month and charged to the card on file. Changing the card mid-cycle applies from the next invoice; the current one is already committed.

closed — height animates to 0

Peek

`collapsedHeight` leaves a teaser visible instead of hiding everything.

collapsedHeight = 40

Interactive

Billing preferences

Invoices are issued on the first working day of each month and charged to the card on file. Changing the card mid-cycle applies from the next invoice; the current one is already committed.

API reference

Generated from the library's TypeScript, so it cannot drift from the implementation.

Props

8 on CollapseProps

children

required

React.ReactNode

open

required

boolean

Whether the content is expanded.

animateOpacity

boolean

default: true

Fades the content along with the height change. Defaults to `true`.

collapsedHeight

number

default: 0

Height kept visible while collapsed — a peek/teaser. Defaults to 0.

duration

number

default: 200

Transition length in ms. Defaults to 200.

keepMounted

boolean

default: false

Skips unmounting the children while collapsed. Defaults to `false`.

style

StyleProp<ViewStyle>

testID

string

󰅁

󰅂