my-test-joyride v0.0.4

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