Carousel

React, Components, Children, State, Effect

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>
  );
};
Examples
ReactDOM.render(
  <Carousel
    carouselItems={[
      <div>carousel item 1</div>,
      <div>carousel item 2</div>,
      <div>carousel item 3</div>
    ]}
  />,
  document.getElementById('root')
);
View on GitHub

Recommended snippets

  • LimitedWordTextarea

    React, Components

    Renders a textarea component with a word limit.

  • Tabs

    React, Components

    Renders a tabbed menu and view component.

  • Accordion

    React, Components

    Renders an accordion menu with multiple collapsible content elements.