@itgold/grandbazar-ui-kit/src/components/accordion/hooks/useAccordion.ts

Grandbazar.io UI component library: React, Typescript, Tailwind, Rollup, Storybook, Jest.

import { MutableRefObject, useEffect, useState } from 'react';

export type TUseAccordionProps = {
  accordionContentRef: MutableRefObject<HTMLDivElement | null>;
  opened: boolean;
};

export function useAccordion({ accordionContentRef, opened }: TUseAccordionProps) {
  const [contentHeight, setContentHeight] = useState(0);
  const [isOpened, setIsOpened] = useState(false);

  useEffect(() => {
    setIsOpened(opened);
  }, [opened]);

  const contentHeightHandler = () => {
    if (!accordionContentRef.current || !accordionContentRef) {
      return;
    }

    setContentHeight(accordionContentRef.current?.scrollHeight ?? 0);
  };

  useEffect(() => {
    if (!accordionContentRef.current) {
      return;
    }

    const resizeObserver = new ResizeObserver(() => {
      contentHeightHandler();
    });

    resizeObserver.observe(accordionContentRef.current as Element);

    return () => {
      resizeObserver.disconnect();
    };
  }, []);

  const toggleAccordion = () => {
    contentHeightHandler();
    setIsOpened(!isOpened);
  };

  return { contentHeight, isOpened, toggleAccordion };
}