@amsterdam/design-system-react/dist/ImageSlider/ImageSliderItem.js

All React components from the Amsterdam Design System. Use it to compose pages in your website or application.

import { jsx as _jsx } from "react/jsx-runtime";
import { clsx } from 'clsx';
import { forwardRef, useContext, useMemo } from 'react';
import { ImageSliderContext } from './ImageSliderContext';
export const ImageSliderItem = forwardRef(({ children, className, slideId, ...restProps }, ref) => {
    const { currentSlideId } = useContext(ImageSliderContext);
    const isInView = useMemo(() => currentSlideId === slideId, [currentSlideId, slideId]);
    const itemClassName = useMemo(() => clsx('ams-image-slider__item', isInView && 'ams-image-slider__item--in-view', className), [isInView, className]);
    return (_jsx("div", { ...restProps, className: itemClassName, ref: ref, ...(!isInView && { inert: '' }), children: children }));
});
ImageSliderItem.displayName = 'ImageSlider.Item';