アコーディオン、Webでよく見かけますよね。
今回はreact-collapsible
を使用してFAQのようなアコーディオンを作成してみようと思います。
完成形
最初に完成形だけ置いときます。
とりあえずソースを見せろという方はこちらをご覧ください。
準備
まずは必要なパッケージのインストール
yarn add react-collapsible
簡単な例
1番単純な例を作成します。
import Collapsible from "react-collapsible"; export function AccordionSample() { return <Collapsible trigger={"click me!!"}> This is easiest Accordion!! </Collapsible> }
上記のようなコンポーネントを作成することで、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スタイルを指定します。
感想
かなり簡単にアコーディオンが実現できるので、今回作成したようなアコーディオンを作るには便利に感じました。