@heycar-uikit/core/collapse/modern/hooks/useCollapse.js

The React UI library from HeyCar

import React, { useState, useEffect } from 'react';
import getCollapseStyles from '../utils/getCollapseStyles.js';

function useCollapse(open) {
    const collapseContent = React.useRef(null);
    const [collapseStyles, setCollapseStyles] = useState({});
    const setExpandedStyle = () => {
        if (open)
            setCollapseStyles(styles => ({
                ...styles,
                height: 'auto',
                overflow: 'visible',
            }));
    };
    const setCollapsedStyle = () => setCollapseStyles(styles => ({
        ...styles,
        height: collapseContent.current?.scrollHeight + 'px',
    }));
    const handlerTransitionEnd = setExpandedStyle;
    useEffect(() => {
        const styles = getCollapseStyles(collapseContent, open);
        if (!open)
            setCollapsedStyle();
        const animationFrameId = window.requestAnimationFrame(() => setTimeout(setCollapseStyles, 0, styles));
        return () => window.cancelAnimationFrame(animationFrameId);
    }, [open]);
    // Only for the first initialization
    useEffect(() => {
        const animationFrameId = window.requestAnimationFrame(() => setTimeout(() => {
            setCollapseStyles(styles => ({
                ...styles,
                overflow: open ? 'visible' : 'hidden',
            }));
        }, 0));
        return () => window.cancelAnimationFrame(animationFrameId);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    return {
        collapseContent,
        collapseStyles,
        handlerTransitionEnd,
    };
}

export { useCollapse as default };