Tourist Guide into your React Components
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:
highlightedSelectors
mutationObservables
resizeObservables
.More details on readme
Now is possible to pass CustomHelper
prop with a component that receive the following props to handle content, status and behaviour:
Docs coming.
Add close
function into content (when is a function) on each step
so 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.
showButtons
and showNavigation
are false
startAt
number as an argument to the internal open()
methodThanks @yossijacob for both contributions!
goToStep
: let you programmatically jump to a stepgetCurrentStep
: let you get the current step index each time it changesprevStep
and nextStep
: let you override default next and prev internal functionsdisableKeyboardNavigation
disableDotsNavigation
accentColor
: let you customize the --reactour-accent
css variablerounded
: apply rounded corners in Highlighted elem and Guide
selector
step property now it's optional (render the content centered)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 🎉