Skip to content

Releases: elrumordelaluz/reactour

Leaving emotions…

12 Aug 08:50
Compare
Choose a tag to compare

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

15 Jun 08:40
Compare
Choose a tag to compare

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

07 Apr 16:13
Compare
Choose a tag to compare
  • Add Round Mask #243
  • Add disableFocusLock #234

Custom Helper

18 Jan 23:57
Compare
Choose a tag to compare

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

19 Dec 09:29
Compare
Choose a tag to compare

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

18 Dec 08:52
Compare
Choose a tag to compare

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

18 Apr 08:16
Compare
Choose a tag to compare
  • 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!

17 Apr 10:14
Compare
Choose a tag to compare

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

05 Dec 12:16
Compare
Choose a tag to compare

Add `disableInteraction` prop

19 Sep 09:08
Compare
Choose a tag to compare

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 🎉