Collapse Component

Collapse.jsx

import React, { useState } from "react";
import { useSpring, animated } from "react-spring";
import useMeasure from 'react-use-measure'
import "./style.css";

const CollapsablePanel = () => {
    const [isCollapsed, setIsCollapsed] = useState(true);
    const [ref, bounds] = useMeasure();

    const togglePanel = () => {
        setIsCollapsed((prevState) => !prevState);
    };
    const panelContentAnimatedStyle = useSpring({
        height: isCollapsed ? 0 : bounds.height,
    });
    const toggleWrapperAnimatedStyle = useSpring({
        transform: isCollapsed ? "rotate(0deg)" : "rotate(180deg)",
    });
    return (
        <div className="wrapper">
            <div className="pannel" onClick={togglePanel}>
                <div className="heading">
                    <span>Flower Collapse</span>
                    <animated.div style={toggleWrapperAnimatedStyle}>
                        <svg width="20px"
                            height="25px" viewBox="0 0 1024 1024"
                            style={{ color: '#6495ed' }}><path d="M64 351c0-8 3-16 9-22.2 12.3-12.7 32.6-13.1
                         45.3-0.8l394.1 380.5L905.7 328c12.7-12.3 33-12 45.3 0.7s12 33-0.7 45.3L534.7 
                         776c-12.4 12-32.1 12-44.5 0L73.8 374c-6.5-6.3-9.8-14.6-9.8-23z" p-id="1705">
                            </path></svg>
                    </animated.div>
                </div>
                <animated.div

                    style={panelContentAnimatedStyle}
                    className="content"
                >
                    <div ref={ref} className="contentInner" >
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
                        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                        erat, sed diam voluptua.
                    </div>
                </animated.div>
            </div>
        </div>
    );
};

export default CollapsablePanel;