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:

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

export const Component = () => (





);
`

$3


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

export const Component = () => {
const videoRef = React.useRef(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 (

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)}
/>




);
}
``