My test joyride

in this package we used react-joyride

Create awesome tours for your app!

Showcase your app to new users or explain functionality of new features.

It uses react-floater for positioning and styling.
And you can use your own components too!

View the demo here (or the codesandbox examples)

Read the docs

Chat about it in our Spectrum community

Setup

npm i my-test-joyride

Getting Started

create new element in your [index.html] for [react portal]

<div id="tour-buttons-container"></div>

in your [App.js] importing [TourBackdrop] and wrap your components by [TourBackdrop] and pass [config] to props in config value [baseUrl] waiting string with backend url it is for saving selected elements from admin tour like in example below

import { TourBackdrop } from 'my-test-joyride';

const tourConfig = {
  baseUrl: 'https://<your backend address>/',
};

function App() {
  return (
    <TourBackdrop config={tourConfig}>
      // the example how can look like your components
      <AppBar />
      <Suspense fallback={<Loading />}>
        <Switch>
          <Route path="/" exact>
            <HomePage />
          </Route>
          <Route path="/movies/:movieId">
            <MovieDetailsPage />
          </Route>

          <Route path="/movies">
            <MoviesPage />
          </Route>
        </Switch>
      </Suspense>
    </TourBackdrop>
  );
}

after this you need wrap your logic part of your app by [IntroductionTour] like this

import { IntroductionTour } from 'my-test-joyride';
// it is AppBar from example before
export function AppBar() {
  return (
    <IntroductionTour className={styles.Header} tag="header" title="navigationInHeader">
      <Navigation />
    </IntroductionTour>
  );
}

Start coding! 🎉