React-interactive-guide NPM

Interactive tour guide for your react app

Documentation

1. Wrap your app with the `TourGuideProvider`

import React from 'react';
import ReactDOM from 'react-dom';
import { TourguideProvider } from 'react-interactive-guide';
import App from './App';
import './index.css';

ReactDOM.render(
  <TourguideProvider>
    <App />
  </TourguideProvider>,
  document.getElementById('root')
);

This provides the context to the tourguide's state and functions.

2. Basic usage of passing tooltip component and content to the tourguide

/**
 * This should be a sibling of your app root in the DOM,
 * It will be used by the tourguide portal as a container.
 **/
const node = document.getElementById('tourguide-root');

// This gets passed to your tooltip component as a child.
const content = ['Content for first step', <AnyReactNodeForStepTwo />, 3];

function App() {
  const {
    curPos,
    anchorEls,
    getAnchorElProps,
    next,
    prev,
    toggle,
    close,
  } = useGuide();

  return (
    <>
      <div>
        <div>
          <h2 {...getAnchorElProps(1)}>Header</h2>
          <Card {...getAnchorElProps(0)}>Some random card</Card>
          <p {...getAnchorElProps(2)}>Descriptions</p>
        </div>
        <button onClick={toggle}>show</button>
        <button onClick={prev}>prev</button>
        <button onClick={next}>next</button>
      </div>
      <Tourguide tooltip={YourTooltipComponent} node={node} />
    </>
  );
}

getAnchorElProps will map your element to a particular step for the tourguide.
toggle is used to enable/disable the tourguide.
next and prev are handlers moves your tourguide forward or backward.

3. Passing different props to each tooltip component step

const node = document.getElementById('tourguide-root');
const content = ['Content for first step', <AnyReactNodeForStepTwo />, 3];

function App() {
  const {
    curPos,
    anchorEls,
    getAnchorElProps,
    next,
    prev,
    toggle,
    close,
  } = useGuide();

  return (
    <>
      <Tourguide
        tooltip={content.map((content, index) => (
          <YourToolTip backgroundColor={index === 0 ? 'white' : 'yellow'}>
            {content}
          </YourToolTip>
        ))}
        node={node}
      />
    </>
  );
}