@smith6423/react-accordion

🚀 설치

npm install @smith6423/react-accordion

📖 사용법

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

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle</button>

      <Accordion>
        {isOpen && (
          <div style={{ padding: "20px" }}>
            <h3>아코디언 내용</h3>
            <p>이 내용은 부드러운 애니메이션과 함께 나타납니다!</p>
          </div>
        )}
      </Accordion>
    </div>
  );
}

⚡ 속도 제어

{
  /* 빠른 애니메이션 (200ms) */
}
<Accordion speed="fast">{isOpen && <div>빠른 애니메이션</div>}</Accordion>;

{
  /* 보통 애니메이션 (500ms, 기본값) */
}
<Accordion speed="normal">{isOpen && <div>보통 애니메이션</div>}</Accordion>;

{
  /* 느린 애니메이션 (800ms) */
}
<Accordion speed="slow">{isOpen && <div>느린 애니메이션</div>}</Accordion>;

{
  /* 커스텀 속도 (밀리초) */
}
<Accordion speed={1200}>{isOpen && <div>1.2초 애니메이션</div>}</Accordion>;

🎛️ Props

| Prop | Type | Default | 설명 | | -------------------- | ---------------------------------------- | ---------- | ------------------------- | | children | ReactNode | - | 아코디언 내용 | | speed | 'fast' \| 'normal' \| 'slow' \| number | 'normal' | 애니메이션 속도 | | closed | boolean | false | 강제로 닫힌 상태 | | transitionOnAppear | boolean | true | 초기 마운트 시 애니메이션 | | className | string | - | 추가 CSS 클래스 | | as | string | 'div' | HTML 요소 타입 |

🎨 스타일 커스터마이징

/* 기본 스타일 수정 */
.react-accordion {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 커스텀 클래스 추가 */
.my-accordion {
  border: 1px solid #ddd;
  border-radius: 8px;
}

<Accordion className="my-accordion">{children}</Accordion>

✨ 특징

• ✅ React 18 완벽 지원
• ✅ TypeScript 지원
• ✅ 부드러운 CSS 애니메이션
• ✅ 커스터마이징 가능한 속도
• ✅ 가벼운 번들 크기
• ✅ 접근성 고려

🙏 크레딧

이 프로젝트는 react-slidedown (Frank Wallis)을 기반으로 하여 React 18 호환성과 속도 제어 기능을 추가한 버전입니다.

📝 라이선스

MIT License

Made with ❤️ for React developers