【React】shadcn/uiのAccordionの開閉を独自の変数で管理したい

概要

shadcn/uiのAccordionに関して、Accordionのドキュメントでは、AccordionItemのvalueによって開閉を制御できるようなサンプルが紹介されています。元になっているradix-uiのAccordionのAPIでは、これを独自の変数で管理できる設定が見てとれるのですが、少し分かりにくかったのでメモ書きしておきます。

前提

• @radix-ui/react-accordionのバージョンは1.1.12です。

対応方法

Accordionコンポーネントにて、valueへAccordionItemに対応する値の変数、onValueChangeへsetterの関数をセットします。typeの属性がsingleの時はstring型、multipleの時はstring[]型が設定できるようになります。

実装サンプル

以下のような一つだけの要素を持つsingleのAccordionを例に、実装サンプルを記します。

export const SampleAccordionComponent: FC<Props> = ({}) => {
  const [accordionValue, setAccordionValue] = useState<string>("");

  // アコーディオンを開く関数
  const openAccordion = () => {
    setAccordionValue("childrenBlock");
  };

  return (
    <Accordion
      type="single"
      collapsible
      value={accordionValue}
      onValueChange={setAccordionValue}
    >
      <AccordionItem value="childrenBlock">
        <AccordionTrigger className="cursor-pointer">
          子設定の一覧
        </AccordionTrigger>
        {/* AccordionContentの中身は割愛 */}
        <AccordionContent>
        ・
        ・
        ・
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
};