Custom Collapse Component in Css and React Js

• To create a custom Collapse component that using only React and CSS for styling, follow these steps. This component will smoothly transition content visibility on click.

Step 1: The Collapse Component

• This Collapse component will use state to manage whether its content is shown or hidden and CSS for the transition effects.

    import React, { useState, useRef } from 'react';

    import './Collapse.css'; // Import the CSS file for styling

    const Collapse = ({ children, isOpen }) => {

        const [height, setHeight] = useState(isOpen ? 'auto' : '0px');

        const contentRef = useRef();

        // Adjust the height dynamically for the collapse animation

        const toggleCollapse = () => {

            setHeight(isOpen ? '0px' : `${contentRef.current.scrollHeight}px`);

        };

        return (

            <>

                <button onClick={toggleCollapse} className="collapse-toggle-button">

                    {isOpen ? 'Hide' : 'Show'}

                </button>

                <div

                    ref={contentRef}

                    style={{ maxHeight: `${height}` }}

                    className="collapse-content"

                >

                    <div className="collapse-inner">

                        {children}

                    </div>

                </div>

            </>

        );

    };

    export default Collapse;

Step 2: The CSS Styling

• Next, create the `Collapse.css` file to style the collapse component. We'll use CSS transitions for the smooth opening and closing effect.

    .collapse-content {

        overflow: hidden;

        transition: max-height 0.5s ease-out;

    }

    .collapse-toggle-button {

        margin-bottom: 10px;

        cursor: pointer;

    }

    /* Add more styling as needed */

Step 3: Usage Example

• Here's an example of how to use the Collapse component. It demonstrates a simple case where the component's open state is managed by a parent component, allowing for a toggle button to control the visibility of the collapsible content.

    import React, { useState } from 'react';

    import Collapse from './Collapse'; // Import the Collapse component

    const App = () => {

        const [isOpen, setIsOpen] = useState(false);

        const toggle = () => setIsOpen(!isOpen);

        return (

            <div className="App">

                <button onClick={toggle} style={{ marginBottom: '10px' }}>

                    Toggle Collapse

                </button>

                <Collapse isOpen={isOpen}>

                    <div style={{ padding: '20px', border: '1px solid #ddd' }}>

                        <p>This is the collapsible content!</p>

                    </div>

                </Collapse>

            </div>

        );

    };

    export default App;

• This setup provides a basic collapse functionality that can be expanded with additional props and styles for more complex layouts or effects. The example above demonstrates a simple collapsible block of content with a button to toggle its visibility.