@react-accordion/accordion

Modern, accessible, and highly customizable React accordion component built for React 18 with TypeScript support.

✨ Features

• 🚀 React 18 Ready: Built with React 18's latest features and createRoot API
• 📱 Responsive: Works perfectly on all device sizes
• ♿ Accessible: WCAG compliant with proper ARIA attributes
• 🎨 Customizable: Easy to style with CSS custom properties
• 🌙 Dark Mode: Built-in dark mode support
• 🔧 TypeScript: Full TypeScript support with type definitions
• 🎯 Lightweight: Minimal bundle size with zero dependencies
• 🔄 Smooth Animations: CSS-based animations for optimal performance
• 🎛️ Flexible: Multiple accordion modes (single/multiple selection)
• 🔒 Controlled/Uncontrolled: Support for both controlled and uncontrolled components

📦 Installation

npm install @react-accordion/accordion

yarn add @react-accordion/accordion

pnpm add @react-accordion/accordion

🚀 Quick Start

import React from "react";
import {
  Accordion,
  AccordionHeader,
  AccordionPanel,
} from "@react-accordion/accordion";
import "@react-accordion/accordion/lib/accordion.css";

function MyComponent() {
  return (
    <Accordion>
      <div>
        <AccordionHeader>첫 번째 섹션</AccordionHeader>
        <AccordionPanel className="react-accordion-panel">
          첫 번째 섹션의 내용입니다.
        </AccordionPanel>
      </div>

      <div>
        <AccordionHeader>두 번째 섹션</AccordionHeader>
        <AccordionPanel className="react-accordion-panel">
          두 번째 섹션의 내용입니다.
        </AccordionPanel>
      </div>
    </Accordion>
  );
}

📖 API Reference

Accordion Props

| Prop | Type | Default | Description | | ---------------------- | ----------------------------- | ----------- | -------------------------------------- | | allowMultiple | boolean | false | 여러 아이템을 동시에 열 수 있는지 여부 | | defaultExpandedItems | number[] | [] | 기본적으로 열려있을 아이템들의 인덱스 | | expandedItems | number[] | undefined | 제어된 모드에서 열려있는 아이템들 | | onExpandedChange | (items: number[]) => void | undefined | 확장 상태 변경 콜백 | | as | keyof JSX.IntrinsicElements | 'div' | 렌더링할 HTML 요소 | | className | string | undefined | 추가 CSS 클래스 |

AccordionHeader Props

| Prop | Type | Default | Description | | ----------- | ----------------------------- | ----------- | ------------------ | | disabled | boolean | false | 헤더 비활성화 여부 | | as | keyof JSX.IntrinsicElements | 'button' | 렌더링할 HTML 요소 | | className | string | undefined | 추가 CSS 클래스 |

AccordionPanel Props

| Prop | Type | Default | Description | | -------------------- | ----------------------------- | ----------- | ------------------------------ | | expanded | boolean | false | 패널 확장 여부 | | disabled | boolean | false | 패널 비활성화 여부 | | transitionOnAppear | boolean | true | 초기 마운트 시 애니메이션 여부 | | as | keyof JSX.IntrinsicElements | 'div' | 렌더링할 HTML 요소 | | className | string | undefined | 추가 CSS 클래스 |

🎯 Usage Examples

Multiple Selection

<Accordion allowMultiple defaultExpandedItems={[0, 2]}>
  <div>
    <AccordionHeader>Section 1</AccordionHeader>
    <AccordionPanel className="react-accordion-panel">Content 1</AccordionPanel>
  </div>
  <div>
    <AccordionHeader>Section 2</AccordionHeader>
    <AccordionPanel className="react-accordion-panel">Content 2</AccordionPanel>
  </div>
  <div>
    <AccordionHeader>Section 3</AccordionHeader>
    <AccordionPanel className="react-accordion-panel">Content 3</AccordionPanel>
  </div>
</Accordion>

Controlled Mode

function ControlledAccordion() {
  const [expandedItems, setExpandedItems] = useState<number[]>([]);

  return (
    <Accordion
      expandedItems={expandedItems}
      onExpandedChange={setExpandedItems}
      allowMultiple
    >
      {/* accordion items */}
    </Accordion>
  );
}

Disabled Items

<Accordion>
  <div>
    <AccordionHeader>Active Item</AccordionHeader>
    <AccordionPanel className="react-accordion-panel">
      This item works normally
    </AccordionPanel>
  </div>
  <div>
    <AccordionHeader disabled>Disabled Item</AccordionHeader>
    <AccordionPanel className="react-accordion-panel">
      This content won't show
    </AccordionPanel>
  </div>
</Accordion>

🎨 Customization

CSS Custom Properties

.react-accordion {
  --accordion-border-color: #e2e8f0;
  --accordion-border-radius: 8px;
  --accordion-transition-duration: 0.3s;
  --accordion-header-padding: 16px 20px;
  --accordion-panel-padding: 20px;
}

Custom Styling

.my-custom-accordion {
  border: 2px solid #3b82f6;
  border-radius: 12px;
}

.my-custom-accordion .react-accordion-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.my-custom-accordion .react-accordion-header:hover {
  background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
}

♿ Accessibility

This component follows WCAG guidelines and includes:

• Proper ARIA attributes (aria-expanded, aria-disabled)
• Keyboard navigation support
• Focus management
• Screen reader compatibility
• High contrast mode support

🌙 Dark Mode

Dark mode is automatically applied based on the user's system preference:

@media (prefers-color-scheme: dark) {
  .react-accordion {
    /* Dark mode styles are automatically applied */
  }
}

📱 Responsive Design

The component is fully responsive and includes:

• Mobile-optimized touch targets
• Flexible layouts
• Reduced padding on smaller screens
• Optimized animations for mobile devices

🔧 Development

# Install dependencies
npm install

# Start development server
npm start

# Run tests
npm test

# Build library
npm run build

📄 License

MIT License - see LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide for details.

📊 Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

🔗 Related Packages

• react-slidedown - Simple slide down component
• @reach/accordion - Accessible accordion component

Made with ❤️ for the React community