Use Collapse - Mantine

import { UseCollapseDemos, UseHorizontalCollapseDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.useCollapse);

Usage

use-collapse is the hook version of Collapse component. It allows animation of height from 0 to auto and vice versa.

Horizontal collapse

use-horizontal-collapse works the same way as use-collapse but animates width instead of height:

ref prop

getCollapseProps return value now includes ref prop. It must be passed to the collapsible element to make the hook work correctly.

Definition

tsx

interface UseCollapseInput {
  /** Expanded state  */
  expanded: boolean;

  /** Transition duration in milliseconds, by default calculated based on content height */
  transitionDuration?: number;

  /** Transition timing function, `ease` by default */
  transitionTimingFunction?: string;

  /** Called when transition ends */
  onTransitionEnd?: () => void;

  /** Called when transition starts */
  onTransitionStart?: () => void;

  /** If true, collapsed content is kept in the DOM and hidden with `display: none` styles */
  keepMounted?: boolean;
}

interface GetCollapsePropsInput {
  style?: CSSProperties;
  ref?: React.Ref<HTMLDivElement>;
}

interface GetCollapsePropsReturnValue {
  'aria-hidden': boolean;
  inert: boolean;
  ref: React.RefCallback<HTMLDivElement>;
  onTransitionEnd: (event: React.TransitionEvent<Element>) => void;
  style: React.CSSProperties;
}

type UseCollapseState = 'entering' | 'entered' | 'exiting' | 'exited';

interface UseCollapseReturnValue {
  state: UseCollapseState;
  getCollapseProps: (input?: GetCollapsePropsInput) => GetCollapsePropsReturnValue;
}

function useCollapse(input: UseCollapseInput): UseCollapseReturnValue;

Exported types

The UseCollapseInput, UseCollapseState, and UseCollapseReturnValue types are exported from the @mantine/hooks package; you can import them in your application:

tsx

import type { UseCollapseInput, UseCollapseState, UseCollapseReturnValue } from '@mantine/hooks';