Why use react-collapse?

react-collapse is a lightweight library that manages height transitions so your collapsible content opens and closes smoothly without manual height math. It handles mount/unmount timing and intermediate states, which is often the most fiddly part of building collapsible UI.

For use cases like FAQs, side panels, expandable cards, or accessible accordions, react-collapse provides a declarative API that meshes well with React state. You toggle a boolean and the component animates to the correct height, keeping your render logic pure and predictable.

Compared to rolling your own CSS-only height animations or toggling max-height hacks, react-collapse reduces layout thrash and edge-case bugs—especially when dynamic content changes size during the transition.

Installation & initial setup

To get started, add the package to your project. The canonical package is available on npm; install it with your package manager of choice. If you prefer a tutorial-style walkthrough, see this react-collapse tutorial that shows a practical example.

Install command (npm):

npm install react-collapse --save

Or with Yarn: yarn add react-collapse. After installing, import the component into your file and wire it to a boolean state (open/closed). Keep your component pure: let react-collapse manage heights, while you manage state and content.

Quick setup (featured-snippet friendly)

Below are the fast steps to add a basic collapse. This is optimized for a short answer in voice search and featured snippets.

• Install: npm install react-collapse.
• Import: import { Collapse } from 'react-collapse'.
• Wrap content in <Collapse isOpened={isOpen}>…</Collapse> and toggle isOpen.

That’s it—the library measures and animates the height for you. Use state hooks or context to manage isOpen, and enhance with CSS for transitions of inner content such as opacity or transform.

Basic example: collapse, expand and toggle

Here is a minimal example showing how to implement a collapsible section with react-collapse. The example demonstrates the most common pattern: a button toggles a boolean that controls the collapse.

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

export default function CollapsibleSection() {
  const [isOpen, setIsOpen] = useState(false)
  return (
    <div>
      <button onClick={() => setIsOpen(prev => !prev)}>
        {isOpen ? 'Collapse' : 'Expand'}
      </button>
      <Collapse isOpened={isOpen}>
        <div style={{ padding: '12px', border: '1px solid #e5e7eb' }}>
          This is the collapsible content. Resize-safe, animated, and accessible.
        </div>
      </Collapse>
    </div>
  )
}

This pattern covers most straightforward use cases. The component handles measurement and animates height changes. You can nest complex content inside the collapse, and it will adjust to dynamic heights.

Remember: avoid manipulating DOM height manually when using react-collapse. Let the library handle it to prevent jumpy animations and layout thrash.

Smooth animations and customization

react-collapse animates height by interpolating the container’s height between 0 and the measured content height. For smoother visual results, combine the height animation with CSS transitions on inner properties—opacity, transform, or padding—so content fades or slides slightly as it grows.

Common customizations include easing, duration, and inner element transitions. react-collapse exposes lifecycle callbacks (onMeasure, onRest) and props like springConfig to tweak physics if you use the library variant that supports springs. For conventional CSS timing, adjust your inner content styles to match the height animation for perceived smoothness.

If you need to animate more than height (for example, collapsing horizontally or animating position), consider wrapping content with additional transition styles or use a complementary animation library. Keep the collapse wrapper focused on height calculations to avoid mixing responsibilities.

Building an accessible accordion

An accordion is a group of collapsible sections where only one pane is open at a time. With react-collapse, you control which panel is open via state and pass boolean props into each <Collapse>. Use ARIA attributes to make the pattern accessible: set aria-expanded, aria-controls, and appropriate IDs for the content regions.

Example architecture: maintain an activeIndex in a parent component. When a header is clicked, update activeIndex to the clicked panel index (or null to close). Each header has a button that toggles the panel and reflects its expanded state via aria-expanded. This clear separation of state and presentation makes keyboard navigation and screen reader announcements accurate.

For keyboard support, ensure headers are focusable and implement arrow key navigation if you want a full, WAI-ARIA Authoring Practices compliant accordion. At minimum, ensure focus order and role semantics are correct so users relying on assistive tech get predictable behavior.

Performance, SSR, and common pitfalls

react-collapse measures content size in the browser, so server-side rendering (SSR) can render collapsed content with zero height or mismatch initial heights. To avoid layout shift on hydration, prefer rendering collapsed content on the server with the same initial open/closed boolean you intend on the client, or delay measurement until after hydration.

Another pitfall is animating very large or complex DOM trees. The measurement step can be expensive if content has many nested nodes or images. Use virtualization or limit initial rendering when lists are very long. If your collapse wraps images, wait until images load (or give them intrinsic sizes) to avoid flicker.

Finally, avoid nesting many simultaneous height transitions; instead, chain them or stagger updates. Keep animation durations modest and match easing between height and inner content transitions for perceived performance.

Troubleshooting & tips

Common issues include jumpy transitions when content changes size mid-animation, or collapsed content briefly appearing on initial load. For jumpiness, ensure you don’t change content height abruptly during the transition; if necessary, debounce content updates until the collapse settles (use onRest). For flash-of-content (FOUC) on load, set initial isOpened state the same server and client-side or hide until mounted.

If you see no animation at all, verify that CSS resets (like global box-sizing or overflow rules) aren’t interfering, and confirm you imported the component correctly. Also double-check that the boolean passed to isOpened is a real boolean—not undefined or a fast-flipping value caused by async state updates.

For advanced customizations, consider combining react-collapse with CSS variables to tune durations per component, or use context to propagate open/close behaviors across a complex layout—this reduces prop drilling and keeps the API clean.

Common props & API notes

react-collapse offers a concise API. The primary prop is isOpened (boolean). You may also find props for spring configuration, callbacks like onRest, and optional mount/unmount behavior. Check the library docs for exact prop names and variants (some forks or wrappers differ slightly).

• isOpened: boolean to open/close the collapse.
• initialStyle / springConfig: (varies by release) for initial and spring behavior.
• onRest: callback after animation completes.

When in doubt, consult the package source or NPM listing for the precise, versioned API. Using TypeScript? Install type definitions or rely on the package’s included types to get autocompletion in your editor.

Links, tutorials and libraries

For an applied walkthrough, see this practical react-collapse tutorial with code examples. To install directly from the registry, visit the npm page for the package: react-collapse installation.

If you want to inspect the source or raise issues, the GitHub repo is the canonical place for bug reports and source-level examples—search for react-collapse on GitHub to find the library and forks. When choosing a library for a production app, prefer a well-maintained repo with clear release notes.

Backlinks: react-collapse tutorial · react-collapse installation

FAQ

1. How do I install react-collapse?

Install via npm or Yarn: npm install react-collapse or yarn add react-collapse. Then import the Collapse component and control it with a boolean state: <Collapse isOpened={isOpen}>…</Collapse>.

2. How can I create a smooth collapse animation?

Let react-collapse manage height and complement it with CSS transitions for inner properties like opacity and transform. Match easing and duration between the height change and inner animations. If the library supports spring config, tweak spring parameters for a natural feel; otherwise, use CSS timing functions.

3. How do I build an accessible accordion with react-collapse?

Maintain an activeIndex in the parent and only pass isOpened={index === activeIndex} to each panel. Use ARIA attributes (aria-expanded, aria-controls) and unique IDs for headers/content. Ensure keyboard focus and clear semantics for screen readers.

Semantic core (primary, secondary, clarifying keyword clusters)

Use this semantic core to guide on-page optimization and internal linking. These are grouped by intent and frequency.

Primary cluster:
- react-collapse
- react collapsible content
- react-collapse tutorial
- react collapse installation
- react-collapse example
- react collapse animation

Secondary cluster:
- react-expand collapse
- react collapsible section
- react-collapse setup
- React accordion component
- react-collapse customization
- react-collapse library

Clarifying / LSI / Related phrases:
- smooth collapse
- collapse expand react
- collapse animation react
- collapsible section react
- react accordion accessibility
- react-collapse getting started
- react collapse FAQ
- react smooth collapse
- collapse component for react
- react collapse example code