Getting started — installation & setup

react-collapse is a lightweight React component for height-based expand/collapse animations. It gives you a simple controlled API so you can show or hide content smoothly without reinventing the collapse math. Before you begin, ensure your project uses React 16+ (or the version recommended by the package docs).

Install via npm or yarn. This is the canonical command:

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

Then import the Collapse component into your component file. This minimal wiring is all you need to get started: import the component, keep a boolean state, and pass it as isOpened.

Tip: If you prefer a step-by-step example, see this practical react-collapse tutorial that walks through setup and real examples.

Basic example — expand / collapse in a functional component

The simplest pattern uses a boolean state and the isOpened prop. react-collapse measures the content and animates the height; you don’t need to manage heights manually. Put whatever markup you want inside the <Collapse> wrapper.

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

export default function CollapseExample() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <button className="btn" onClick={() => setOpen(o => !o)} aria-expanded={open}>
        {open ? 'Collapse' : 'Expand'}
      </button>
      <Collapse isOpened={open}>
        <div className="panel">
          <p>Content inside the collapse. Images, lists, or forms are fine here.</p>
        </div>
      </Collapse>
    </div>
  );
}

This approach keeps your component controlled and predictable. Use ARIA attributes (shown above) for assistive technology: add aria-expanded on the button and ensure the content region is described or labeled for context.

When starting with many collapsed sections, avoid rendering large DOM blobs until opened. You can conditionally mount heavy children inside <Collapse> on first open to improve initial load time.

Animation & smooth collapse — tuning behaviour

react-collapse handles the numeric animation for you, but you may want to tune the feel. The library uses spring-based animation under the hood (react-motion in classic versions); you can pass a spring configuration to control tension/velocity. Check the package docs for the exact prop name supported by your installed version.

For a subtle, fast feel use firmer spring settings; for slow, bouncy reveals use softer settings. If you prefer CSS-driven transitions, consider animating max-height with a transition on a wrapper instead — but be aware that CSS max-height requires a known max value or a JS-calculated height to avoid jumpiness.

Common visual issues: images or fonts that load after the animation can cause layout shifts. Mitigate this by providing intrinsic image sizes (width/height or aspect-ratio) or by measuring the content height after assets load and then triggering the open animation.

Accordion patterns & accessibility

Turning multiple Collapse instances into an accordion is simply a matter of controlling which index is open. Keep semantics clean: the trigger should be a button with aria-expanded, and the content region should use role="region" with aria-labelledby linked to the trigger’s id.

Keyboard interactions matter: support Enter/Space to toggle, and optionally Up/Down arrow navigation between headers for a full WAI-ARIA accordion experience. A small state machine — currentIndex, setCurrentIndex — is enough to implement exclusive-open behavior.

Here’s an outline of the behaviour you should provide for accessibility: logical focus order, clear labels, and announcement-friendly markup so screen readers correctly report expand/collapse state. This makes your accordion usable and improves SEO for voice/search assistants.

// Pseudocode outline for accordion control
const [openIndex, setOpenIndex] = useState(null);
// render headings as buttons with aria-expanded={openIndex === idx}

Customization & styling — make it yours

Styling is straightforward: wrap the collapsed content in a div with a className and apply CSS. Because react-collapse animates inline height, you can still use CSS for padding, borders and inner layout without interfering with the animation.

To theme the animation, prefer composition over monkey-patching internals: provide props for spring config (if available) or wrap the <Collapse> component and centralize your animation settings. That keeps your code consistent across the site.

If you need custom animations (fade+slide), combine CSS opacity transition with the height animation: animate opacity inside the content while letting react-collapse manage height. This approach avoids reimplementing collapse mechanics while achieving polished visuals.

Performance & production tips

Avoid animating very large lists or deeply nested content. If you must collapse heavy content, consider virtualization (render only visible items) or split content into smaller chunks so the browser has less layout work when animating heights.

Prefer controlled components: drive isOpened from parent state, and avoid uncontrolled toggles that cause unexpected re-renders. Memoize heavy child components or use lazy-loading techniques for images and embeds inside collapsed panels.

Testing on low-end devices matters — animation jank often appears on slower CPUs. Measure paint times and frame drops with DevTools, and fallback to simpler transitions or no animation on constrained devices if necessary to keep UX snappy.

Troubleshooting — common issues & fixes

Issue: “Collapse opens but content jumps or flashes.” Fix: ensure images have dimensions or wait for images to load before setting isOpened. If content size changes after open, re-measure or re-trigger the animation once dimensions stabilize.

Issue: “Animation feels wrong or has a weird bounce.” Fix: tune spring config (tension/friction or stiffness/damping depending on version). If your version of react-collapse expects a slightly different prop shape, consult the installed package docs — libraries evolve, and minor API differences exist between versions.

Issue: “Accessibility warnings from linters.” Fix: add proper ARIA attributes: aria-expanded on toggles, an id/aria-labelledby pair for the content region, and ensure keyboard focus management is logical. Small ARIA additions resolve most lint complaints.

Further reading and a worked example are available in this walkthrough on Dev.to: building collapsible content with react-collapse.

FAQ

How do I install react-collapse and get started?

Install via npm or yarn (npm install react-collapse), import {'{ Collapse }'} from the package, and control the component with a boolean state passed to isOpened. See the example above for a minimal pattern and the linked tutorial for a walkthrough.

How can I create an accessible accordion with react-collapse?

Use a single state piece (openIndex) to control which panel is open. Make each heading a <button> with aria-expanded, and give the content role="region" and aria-labelledby attributes. Add keyboard handlers for Enter/Space and optional arrow-key navigation for a complete experience.

How do I make the collapse animation smoother?

Tune the library’s spring configuration if available, ensure images/fonts include intrinsic sizes to avoid layout shifts, and combine the height animation with an opacity transition inside the content for a polished effect. If necessary, fallback to CSS transitions for simpler interactions.

Expanded semantic core (keywords & clusters)

Use these phrases naturally across headings, alt text for images, and concise answers to support voice-search and snippet extraction. Group and prioritize primary keywords in the title, H1, and first paragraph for best results.