Menu

gitpiper

Carousel react Code Snippet in 2023

componentschildrenstateeffectadvanced

Last Updated: 2 December 2023

Renders a carousel component.

  • Use the useState() hook to create the active state variable and give it a value of 0 (index of the first item).
  • Use the useEffect() hook to update the value of active to the index of the next item, using setTimeout.
  • Compute the className for each carousel item while mapping over them and applying it accordingly.
  • Render the carousel items using React.cloneElement() and pass down ...rest along with the computed className.
.carousel { position: relative; } .carousel-item { position: absolute; visibility: hidden; } .carousel-item.visible { visibility: visible; }
const Carousel = ({ carouselItems, ...rest }) => { const [active, setActive] = React.useState(0); let scrollInterval = null; React.useEffect(() => { scrollInterval = setTimeout(() => { setActive((active + 1) % carouselItems.length); }, 2000); return () => clearTimeout(scrollInterval); }); return ( <div className="carousel"> {carouselItems.map((item, index) => { const activeClass = active === index ? ' visible' : ''; return React.cloneElement(item, { ...rest, className: `carousel-item${activeClass}` }); })} </div> ); };
ReactDOM.render( <Carousel carouselItems={[ <div>carousel item 1</div>, <div>carousel item 2</div>, <div>carousel item 3</div> ]} />, document.getElementById('root') );

react snippet similar to Carousel For You in December 2023

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️

© 2023 GitPiper. All rights reserved

Rackpiper Technology Inc

Company

About UsBlogContact

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️