Function CarouselIndicators

src/CarouselIndicators.js:6–45

(props)

import { mapToCssModules } from './utils';

function CarouselIndicators(props) {
  const {
    items,
    activeIndex,
    cssModule,
    onClickHandler,
    className,
    ...attributes
  } = props;

  const listClasses = mapToCssModules(
    classNames(className, 'carousel-indicators'),
    cssModule,
  );
  const indicators = items.map((item, idx) => {
    const indicatorClasses = mapToCssModules(
      classNames({ active: activeIndex === idx }),
      cssModule,
    );
    return (
      <button
        aria-label={item.caption}
        data-bs-target
        type="button"
        key={`${item.key || Object.values(item).join('')}`}
        onClick={(e) => {
          e.preventDefault();
          onClickHandler(idx);
        }}
        className={indicatorClasses}
      />
    );
  });

  return (
    <div className={listClasses} {...attributes}>
      {indicators}
    </div>
  );
}

CarouselIndicators.propTypes = {
  /** The current active index */