Leaving emotions…

Since this release, the package doesn't depends anymore on a css-in-js library (emotion) for styling and layouts calculations.

@reactour/[email protected]
@reactour/[email protected]
@reactour/[email protected]

Adding new step props: observables + highlight selectors

Thanks to the awesome @qboot work on #266 now is possible to:

• highlight multiple elements passing an Array of selectors into the new step prop highlightedSelectors
• redraw the svg mask when node mutations happens passing selectors to mutationObservables
• redraw the mask when node resizes happens, passing them to resizeObservables.

More details on readme

disableFocusLock + roundedMask

• Add Round Mask #243
• Add disableFocusLock #234

Custom Helper

Now is possible to pass CustomHelper prop with a component that receive the following props to handle content, status and behaviour:

• current (number)
• content (string|func)
• totalSteps (number)
• gotoStep (func)
• close (func)

Docs coming.

Add close function into step

Add close function into content (when is a function) on each stepso now is possible to:

const steps = [
  {
    selector: '.step2',
    content: ({ close }) => (
      <>You can <button onClick={close}>close</button> the Tour from here</>
    ),
  },
  //...
]

thanks @gdsrosa

v1.10.0

onAfterOpen and onBeforeClose will not apply styles to body to avoid scroll by default. Is up to the end user. Example in demo App.

v1.7.1

• Remove Controls Component when both flags showButtons and showNavigation are false
• Pass startAt number as an argument to the internal open() method

Thanks @yossijacob for both contributions!

💥Customization boom!

New props

• goToStep: let you programmatically jump to a step
• getCurrentStep: let you get the current step index each time it changes
• prevStep and nextStep: let you override default next and prev internal functions
• disableKeyboardNavigation
• disableDotsNavigation
• accentColor: let you customize the --reactour-accent css variable
• rounded: apply rounded corners in Highlighted elem and Guide

Step changes

• selector step property now it's optional (render the content centered)

Awesome changes

• Refactor mask with dynamic svg shape
• Add Code conventions

Props to @qboot for the really clean code and descriptions in the PRs full of useful stuff.

Allow `center` as postion

thanks to @iamdey

Add `disableInteraction` prop

This new prop don't allow to interact with the highlighted elem.
Also added the prop highlightedMaskClassName to customise this new layer.

Thanks to @msliva for the idea and congrats for the first PR 🎉