🐙

shadcnのAccordionコンポーネントの開閉状態を制御する方法

に公開
Next.js
React
frontend
webapp
shadcn/ui
tech

背景

shadcnの提供するAccordionコンポーネントは非常に便利ですが、開閉状態の制御方法についてドキュメント内で詳しい説明が見当たりません。ソースコードを読めば理解できますが、「すぐに使いたい！」という方にとっては少しハードルが高いですよね。

そこで本記事では、shadcnのAccordionコンポーネントの開閉状態を制御する方法を詳しく解説します。サンプルコードも交えながら説明するので、ぜひ参考にしてください！

AccordionのPropsについて

shadcnのAccordionコンポーネントを制御するためには、以下のPropsを使用します。

value Props

  • 開かれているAccordionItemの識別に使用されます。AccordionItemに渡すvalue Propsとの一致を判定して識別する仕組みです。
  • type Propsが"single"の場合: valueの型はstring。
  • type Propsが"multiple"の場合: valueの型はstring[]。

onValueChange Props

  • 引数にstring型の値を取るコールバック関数を渡します（type Propsが"multiple"の場合はstring[]型）。
  • クリックしたAccordionItemのvalueまたは空文字が引数として渡されます（空文字はアコーディオンを閉じる際に渡されます）。

サンプルコード

以下は、type Props="single"の場合のサンプルコードです。このコードでは、開かれているAccordionItemを状態管理し、必要に応じて開閉を制御しています。

import { useCallback, useState } from "react";
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "shadcn-ui";
import { Typography } from "shadcn-ui";

export function SampleControlledAccordion() {
  /** 開かれているAccordionItemの識別 */
  const [openingAccordionItem, setOpeningAccordionItem] = useState("item-1");

  /** Accordionの開閉状態を変更する関数 */
  const onValueChange = useCallback((value: string) => {
    setOpeningAccordionItem(value);
  }, []);

  return (
    <Accordion type="single" className="w-full" collapsible value={openingAccordionItem} onValueChange={onValueChange}>
      <AccordionItem value="item-1">
        <AccordionTrigger>
          <Typography className="font-bold">アコーディオンです</Typography>
        </AccordionTrigger>
        <AccordionContent>中身です</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>
          <Typography className="font-bold">アコーディオンです</Typography>
        </AccordionTrigger>
        <AccordionContent>中身です</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

コードのポイント

  1. useStateで状態管理
    現在開いているAccordionItemの値を状態管理するためにuseStateを使用します。

  2. onValueChangeで状態更新
    onValueChangeには、クリックされたAccordionItemのvalueを受け取って状態を更新するコールバック関数を指定します。

  3. 開閉制御の仕組み
    Accordionのvalue PropsとAccordionItemのvalueが一致した場合にそのアイテムが開かれる仕組みになっています。

まとめ

shadcnのAccordionコンポーネントは、valueとonValueChangeを使用することで簡単に開閉状態を制御できます。本記事のサンプルコードをベースに、ぜひ実際のプロジェクトで活用してみてください！

shadcnの他のコンポーネントについても興味があれば、引き続きチェックしてみてくださいね。

この内容でZennの記事を公開すれば、多くの読者に役立つ実践的な情報を提供できると思います！

Discussion