reactour

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]

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

• Add Round Mask #243
• Add disableFocusLock #234

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 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

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

• 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!

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.

thanks to @iamdey

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 🎉

Allows to customize the content with two params current step and total step.

i.e

<Tour
   onRequestClose={closeTour}
   steps={[…]}
   isOpen={true}
   badgeContent={(cur, tot) => `${cur} of ${tot}`}
/>

or something more complex like

<Tour
   onRequestClose={closeTour}
   steps={[…]}
   isOpen={true}
   badgeContent={(cur, tot) => cur === 1 ? 'welcome!' : `${cur}/${tot}`}
/>

Thanks to @jovstern for the idea

Allowing to change the string, useful for languages different than english.