Lens Design System – React Carousel component

Documentation

Browse the documentation at lens-design-system.k8slens.dev.

Usage in React apps

• run npm i -s @k8slens/lds @k8slens/lds-tokens @k8slens/lds-carousel
• import @k8slens/lds-tokens/lib/es/font-imports.css in your React app to include fonts
• import @k8slens/lds/lib/es/index.css in your React app to include core styles
• import @k8slens/lds-carousel/lib/es/index.css in your React app to include Carousel styles
• Use in a component:

import Carousel from "@k8slens/lds-carousel";

export const Component = () => (
  <Carousel>
    <img src="src" alt="Alt text" />
    <img src="src" alt="Alt text" />
    <img src="src" alt="Alt text" />
  </Carousel>
);

Autoplay first slide when it's a video

import Carousel from "@k8slens/lds-carousel";

export const Component = () => {
  const videoRef = React.useRef<HTMLVideoElement>(null);

  const [isVideoPlaying, setIsVideoPlaying] = useState(false);
  const [playing, setVideoPlaying] = useState(false);

  useEffect(() => {
    if (videoRef?.current && playing && !isVideoPlaying) {
      videoRef.current.play().catch((e) => {
        console.log(e);
      });
    }
  }, [videoRef, playing, isVideoPlaying]);

  return (
    <Carousel>
      <video
        key="video-1" // Key needs to include the word "video"
        ref={videoRef}
        autoPlay={playing}
        src="src"
        muted // Mute video to avoid autoplay issues
        onPlay={() => setIsVideoPlaying(true)}
        onPause={() => setIsVideoPlaying(false)}
        onEnded={() => setIsVideoPlaying(false)}
      />
      <img src="src" alt="Alt text" />
      <img src="src" alt="Alt text" />
      <img src="src" alt="Alt text" />
    </Carousel>
  );
}