tessl/npm-react-collapsible

React component to wrap content in Collapsible element with trigger to open and close.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

React Collapsible

Name: tessl/npm-react-collapsible
Author: tessl

React Collapsible is a flexible and accessible component for creating collapsible content sections with customizable triggers. Unlike accordions, multiple sections can be open simultaneously, making it ideal for FAQ sections, content organization, and space-efficient UI layouts.

Package Information

Package Name: react-collapsible
Package Type: npm
Language: JavaScript with TypeScript definitions
Installation: npm install react-collapsible

Core Imports

import Collapsible from "react-collapsible";
import { CollapsibleProps } from "react-collapsible";

For CommonJS:

const Collapsible = require("react-collapsible");

Basic Usage

import React from "react";
import Collapsible from "react-collapsible";

// Simple usage
<Collapsible trigger="Click to expand">
  <p>This content can be expanded or collapsed.</p>
  <p>It can contain any React elements or HTML.</p>
</Collapsible>

// Controlled usage
const [isOpen, setIsOpen] = useState(false);

<Collapsible 
  trigger="Toggle Content"
  open={isOpen}
  handleTriggerClick={() => setIsOpen(!isOpen)}
>
  <div>Controlled collapsible content</div>
</Collapsible>

Architecture

React Collapsible is built around a single component with comprehensive customization options:

Core Component: Collapsible class component that wraps content and provides trigger functionality
State Management: Internal state for animation timing, height calculations, and open/closed status
Accessibility: Built-in ARIA attributes and keyboard support
CSS Integration: BEM-style class names for easy styling
Animation System: Smooth height transitions with configurable timing and easing

Capabilities

Basic Collapsible Component

The main component for creating collapsible content sections with customizable triggers and content.

import Collapsible from "react-collapsible";

declare class Collapsible extends React.Component<CollapsibleProps> {}

export default Collapsible;

Configuration and Styling

Animation and Transitions

Control the timing, easing, and behavior of expand/collapse animations for smooth user experiences.

interface AnimationProps {
  transitionTime?: number;
  transitionCloseTime?: number | null;
  easing?: string;
  overflowWhenOpen?: "hidden" | "visible" | "auto" | "scroll" | "inherit" | "initial" | "unset";
}

Animation and Transitions

Event Handling

Comprehensive callback system for responding to state changes and user interactions throughout the collapsible lifecycle.

interface EventProps {
  handleTriggerClick?: (accordionPosition?: string | number) => void;
  onOpen?: () => void;
  onClose?: () => void;
  onOpening?: () => void;
  onClosing?: () => void;
  onTriggerOpening?: () => void;
  onTriggerClosing?: () => void;
}

Event Handling

Accessibility Features

React Collapsible includes comprehensive accessibility support:

ARIA Attributes: Automatically adds aria-expanded, aria-disabled, aria-controls, and aria-labelledby
Semantic Roles: Trigger has role="button", content has role="region"
Keyboard Support: Enter and Space key handling for trigger activation
Focus Management: Configurable tabIndex for keyboard navigation
Screen Reader Support: Optional contentHiddenWhenClosed to hide content from screen readers when collapsed

Common Issues and Solutions

Animation Not Triggering

If transitions are not working smoothly, ensure:

Content has measurable height (avoid elements with height: 0 that don't expand)
CSS transitions are not conflicting with the component's internal styles
transitionTime is set to a reasonable value (default: 400ms)

Performance with Large Content

For better performance with expensive or large content:

<Collapsible
  trigger="Performance optimized"
  lazyRender={true}
  contentHiddenWhenClosed={true}
  transitionTime={300}
>
  <ExpensiveComponent />
</Collapsible>

Accessibility Concerns

Ensure proper accessibility by:

Using contentHiddenWhenClosed={true} to hide collapsed content from screen readers
Setting appropriate tabIndex for keyboard navigation
Providing descriptive trigger text or using triggerElementProps for aria-label

Types

interface CollapsibleProps extends React.HTMLProps<Collapsible> {
  // Required props
  trigger: string | React.ReactElement<any>;
  
  // State control
  open?: boolean;
  triggerDisabled?: boolean;
  
  // Content behavior
  lazyRender?: boolean;
  contentHiddenWhenClosed?: boolean;
  
  // Element customization
  contentContainerTagName?: string;
  triggerTagName?: string;
  containerElementProps?: object;
  triggerElementProps?: object;
  contentElementId?: string;
  
  // Styling
  classParentString?: string;
  className?: string;
  openedClassName?: string;
  triggerStyle?: null | React.CSSProperties;
  triggerClassName?: string;
  triggerOpenedClassName?: string;
  contentOuterClassName?: string;
  contentInnerClassName?: string;
  
  // Advanced features
  triggerWhenOpen?: string | React.ReactElement<any>;
  triggerSibling?: string | React.ReactElement<any> | (() => React.ReactElement<any>);
  accordionPosition?: string | number;
  tabIndex?: number;
  
  // Animation (see Animation sub-doc for details)
  transitionTime?: number;
  transitionCloseTime?: number | null;
  easing?: string;
  overflowWhenOpen?: "hidden" | "visible" | "auto" | "scroll" | "inherit" | "initial" | "unset";
  
  // Events (see Events sub-doc for details)
  handleTriggerClick?: (accordionPosition?: string | number) => void;
  onOpen?: () => void;
  onClose?: () => void;
  onOpening?: () => void;
  onClosing?: () => void;
  onTriggerOpening?: () => void;
  onTriggerClosing?: () => void;
}

Default Values

The component provides sensible defaults for most properties:

// Key default values
{
  transitionTime: 400,           // 400ms animation duration
  easing: "linear",             // Linear animation timing
  open: false,                  // Start closed
  triggerTagName: "span",       // Trigger element type
  contentContainerTagName: "div", // Content container type
  classParentString: "Collapsible", // Base CSS class
  lazyRender: false,           // Render content immediately
  triggerDisabled: false,      // Enable trigger interaction
  overflowWhenOpen: "hidden",  // Hide overflow when open
  contentHiddenWhenClosed: false // Content visible to screen readers when closed
}

Install with Tessl CLI