Bullets

The Bullets component displays a set of bullets, which allow users to alternate between different screens.

Import

import { Bullets } from '@faststore/ui'

Usage

Props

totalQuantity*number

Description

Number of bullets that should be rendered.

activeBullet*number

Description

The currently active bullet (zero-indexed).

onClick*(e: MouseEvent<Element, MouseEvent>, bulletIdx: number) => void

Description

Event handler for clicks on each bullet. The handler will be called with the index of the bullet that received the click.

testIdstring

Description

ID to find this component in testing tools (e.g.: cypress, testing-library, and jest).

Default value

store-bullets

ariaLabelGenerator(index: number, isActive: boolean) => string

Description

Function that should be used to generate the aria-label attribute added to each bullet that is inactive. It receives the bullet index as an argument so that it can be interpolated in the generated string.

Default value

(idx: number, isActive: boolean) => isActive ? 'Current page' : `Go to page ${idx + 1}`

ariaControlsGenerator(index: number) => string

Description

Function that should be used to generate the aria-controls attribute added to each bullet. It receives the bullet index as argument and should return a string.

Customization

data-store-bullets

data-bullet-item

[data-bullet-item][aria-selected="true"]