Reactで簡単にアコーディオンを実装できるライブラリ

概要

HTMLでアコーディオンを実装する方法はいくつかあります。CSSだけで実装する方法もあれば、Bootstrapなどのフレームワークを利用する方法も挙げられます。今回はReactのライブラリで簡単にアコーディオンを実装できるライブラリreact-accessible-accordionを紹介します。

サンプル

クリック前はこんな感じで、

クリックすると中身が表示される

アコーディオンの実装サンプルです。

SampleComponent.js

import React from "react";
import {
  Accordion,
  AccordionItem,
  AccordionItemHeading,
  AccordionItemButton,
  AccordionItemPanel,
} from "react-accessible-accordion";
import "react-accessible-accordion/dist/fancy-example.css";

export default function SampleComponent() {
  return (
    <div>
      <Accordion allowZeroExpanded>
        <AccordionItem>
          <AccordionItemHeading>
            <AccordionItemButton>ヘッダー</AccordionItemButton>
          </AccordionItemHeading>
          <AccordionItemPanel>内容</AccordionItemPanel>
        </AccordionItem>
      </Accordion>
    </div>
  );
}

その他出来ること

• 詳細はこのデモページにまとめられています。
• 今回の私のサンプルではヘッダーが一つですが、ヘッダーを複数設定して一つしか開けないようにする、といった制御もできます。
• アコーディオンを開閉したときのイベントを拾えたり、アコーディオンのstateも取得できるようです。