react-collapsibleを使ってアコーディオンを作成する

アコーディオン、Webでよく見かけますよね。
今回はreact-collapsibleを使用してFAQのようなアコーディオンを作成してみようと思います。

完成形

最初に完成形だけ置いときます。
f:id:sho03:20210220172807g:plain
とりあえずソースを見せろという方はこちらをご覧ください。

準備

まずは必要なパッケージのインストール

yarn add react-collapsible

簡単な例

1番単純な例を作成します。

import Collapsible from "react-collapsible";

export function AccordionSample() {

  return <Collapsible trigger={"click me!!"}>
      This is easiest Accordion!!
    </Collapsible>
}

f:id:sho03:20210220161322g:plain
上記のようなコンポーネントを作成することで、click me!!!の文字をクリックするとその下部にhello, collapsible!が出力されるのがわかると思います。

Collapsibleのオプション

Collapsibleアコーディオンの開閉を制御するtriggerオプションが必須になりますが、それ以外にもいくつかのオプションがあります。
すでに使用したtriggerオプションも含めていくつか紹介しようと思います。

アコーディオンの開閉動作に関わるオプション

trigger

アコーディオンの開閉のトリガー(契機)となる文字列またはReactNodeを指定します。前述した例では文字列を指定しましたが、ReactNodeを渡せるので、任意のコンポーネントも使用できます。

<Collapsible trigger={<AnyComponent/>}>
</Collapsible>

transitionTime

アコーディオンの開閉にかかる時間を指定します。単位はミリ秒です。
transitionTime={1000}

transitionCloseTime

アコーディオンが閉じる時の時間を指定します。transitionTimeと同様に単位はミリ秒です。
transitionCloseTime={1000}

アコーディオンのスタイルに関わるオプション

className

アコーディオンが閉じている時に適用されるCSSスタイルを指定します。なお、

openedClassName

アコーディオンが開いている時に適用されるCSSスタイルを指定します。

感想

かなり簡単にアコーディオンが実現できるので、今回作成したようなアコーディオンを作るには便利に感じました。

参考

公式ドキュメント