Product Tour Gallery Block for React

STEPS lists four steps; each names a region of the screen (data-region) as its target, a placement and a title and sentence. The Tour darkens the page, spotlights the region and places a popover by it, with a progress count. Next and Back move between steps, Skip ends the tour, and so do Escape and a click outside. The arrow keys also move between steps, and the last step's button says Done.

Give the elements you want to point at a data-region (or pass any function that returns an element as a step's target), write one step per element, and drop the drawn screen. A step with no target is a centred dialog, which suits a welcome or a goodbye.

The button is reached with Tab and starts the tour with Enter or Space. In the tour, Left and Right arrows move between steps, Tab moves among Skip, Back and Next, and Escape closes it. The screen itself is hidden from assistive technology; each step's popover carries the written explanation.

Mostly. The popover and its buttons use the Tour's own styles, so its Next button and the spotlight outline use your primary colour; the rest of the block uses foreground tones only.

The split mirrors, and the popovers are placed with logical start and end sides. The drawn screen is a picture of a left-to-right product, so it keeps its own direction.

The popovers appear without their entrance animation. The block itself has nothing that moves.