Why react-collapse for collapsible content?

react-collapse is a lightweight React component designed to animate height changes for show/hide interactions. It focuses on reliable expand/collapse behavior without imposing heavy styling or a complex API, making it ideal for UIs that require smooth transitions: collapsible section panels, accordions, lists with progressive disclosure, and mobile-friendly toggles.

Unlike full UI frameworks, react-collapse gives you control over markup and accessibility while handling the tricky part — smooth height animation — using physics-based interpolation. That means fewer layout jumps and better UX across browsers and screen sizes. If you want the underlying animation handled but still want to style your own panel, this library fits well.

It integrates with controlled and uncontrolled patterns: you can manage collapse state from a parent (recommended for accordions) or let the component manage its own open/close lifecycle. That flexibility, combined with small bundle size, explains why developers choose it for both simple collapsible sections and complex accordion components.

Getting started — installation & setup

Install via npm or yarn. The typical install is a single dependency and works with modern React apps:

npm install react-collapse
# or
yarn add react-collapse

Once installed, import the core component and wrap the content you want to show/hide. The API is simple: control an isOpened boolean and react-collapse handles the height animation. This pattern supports both expand/collapse and accordion behaviors when you orchestrate multiple panels from a parent component.

If you prefer a hands-on example walkthrough, see this practical react-collapse tutorial with code snippets and live patterns. It demonstrates collapsible sections, accessibility tweaks, and a basic accordion implementation.

Core concepts and API explained

At its core, react-collapse exposes a <Collapse> component that accepts an isOpened prop and optionally style and spring/animation configs. When isOpened toggles, the component interpolates the height and exposes onRest or onMeasure callbacks for advanced use cases.

Important props you’ll use frequently: isOpened (boolean), theme (object for custom inline styles), and callback props for lifecycle hooks. You often combine these with conditional rendering for headers and icons and keep the content DOM present to maintain layout stability.

Another core concept: controlled vs uncontrolled panels. For a single collapsible section, toggling a local state is fine. For accordions (only one open at a time), manage an active index in the parent and pass isOpened={activeIndex === i} to each <Collapse> instance. This minimizes reflows and improves predictability.

Common patterns: accordion, collapsible section, and expand/collapse

The accordion pattern coordinates multiple <Collapse> components so only one panel is open at a time. Implement it by storing an active panel id and toggling it on header clicks. This approach gives you accessible roles and keyboard handling in the parent while leaving animation to react-collapse.

For standalone collapsible sections, use a simple toggle button that changes a local boolean. Make sure to include clear aria attributes (aria-expanded and aria-controls) and manage focus appropriately — e.g., move focus into newly revealed content when necessary for keyboard users.

Expand/collapse affordances: use visual affordances (chevrons, animated height changes) and subtle motion to communicate state. react-collapse supports smooth transitions and when combined with CSS transitions for icons, the result feels polished without lots of JS.

Animation, customization, and smooth collapse

react-collapse uses physics-based animation by default (springs) and exposes options to tune stiffness and damping. For most UIs, defaults are appropriate. If you want snappier or more languid motion, tweak the spring configuration to match your brand’s motion language.

Customization is simple: you style the content wrapper and header however you like. You can pass a theme object or style the inner container via className. For complex layouts, measure content to avoid layout jumpiness or use fixedHeight patterns if your content is predictable.

For very smooth collapse on dynamic content (images, async text), ensure images have dimensions or use CSS aspect-ratio so layout measurement stays accurate. If content height changes while open, you can trigger a re-measure or allow react-collapse to animate to the new height — which keeps the UI feeling stable and responsive.

Accessibility, performance, and best practices

ARIA attributes matter. Add aria-expanded to the toggle and pair it with aria-controls pointing to the collapsible region’s id. Inside the panel, ensure focusable elements receive focus when content becomes visible. Avoid removing content from the DOM if screen readers must read it — instead, visually hide if needed or manage live regions thoughtfully.

Performance-wise, keep heavy DOM inside collapsed sections if they are rarely opened, but consider lazy loading content for large or media-heavy panels. Controlling render frequency from the parent is an easy optimization: only mount expensive children when needed or when the panel first opens (incremental mount).

Lastly, test keyboard navigation and reduced-motion settings. Respect the prefers-reduced-motion media query by simplifying or disabling animations for users who have requested reduced motion; react-collapse can be wrapped in a conditional to skip animation when necessary.

Example: simple collapsible section and accordion

Below is a compact, production-ready example showing a collapsible panel and a two-panel accordion. It demonstrates controlled state, aria attributes, and composition with react-collapse.

import React, {useState} from 'react';
import {Collapse} from 'react-collapse';

function Collapsible() {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button aria-expanded={open} aria-controls="panel-1" onClick={() => setOpen(o => !o)}>
        Toggle panel
      </button>
      <Collapse isOpened={open}>
        <div id="panel-1">Collapsible content goes here.</div>
      </Collapse>
    </div>
  );
}

// Accordion: parent manages active index
function Accordion({items}) {
  const [active, setActive] = useState(null);
  return items.map((it, i) => (
    <div key={i}>
      <button aria-expanded={active===i} onClick={() => setActive(active===i ? null : i)}>{it.title}</button>
      <Collapse isOpened={active===i}><div>{it.body}</div></Collapse>
    </div>
  ));
}

Adapt these patterns to your style system: utility classes, CSS-in-JS, or plain CSS all work. The important bits are state management, aria attributes, and letting react-collapse animate the height.

For a step-by-step tutorial with additional samples and an accessible accordion variant, check this practical guide: React collapsible content and examples.

References & quick links

Further reading and a hands-on walkthrough:

react-collapse tutorial — practical guide with examples and patterns.

Pro tip: link your own implementation guide or component library docs using keyword-rich anchors like “React accordion component” or “React collapse animation” to consolidate topical authority.

FAQ

How do I install and set up react-collapse?

Install with npm install react-collapse or yarn add react-collapse. Import {'{'}Collapse{'}'}, manage an isOpened boolean in state, and wrap the content you want to animate. Add aria-expanded and aria-controls to your toggles for accessibility.

Can react-collapse be used to build an accessible accordion?

Yes. Manage an active index in the accordion parent and pass isOpened={activeIndex === i} to each panel. Include proper ARIA roles/attributes (e.g., aria-expanded, aria-controls, unique ids) and keyboard handling for arrow navigation if required.

How do I smooth the collapse animation for dynamic content?

Ensure content has predictable dimensions (set image width/height or use aspect-ratio), let react-collapse measure and animate height, and tune the spring/damping options when needed. Respect prefers-reduced-motion and lazy-load heavy content to avoid layout thrash.