- 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.
- 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.