React Spotlight Tour

Easy to Integrate

React Spotlight Tour focues on ease of integration. It's just an npm install away and works with any React framework, no CSS required!

Create Beautiful Tutorials

Traditional tours and tutorials can overwhelm your users and cause them to drop out halfway through. React Spotlight Tour lets you call attention to what matters without all the steps.

First-Class React Support

Other libraries require you to add selectors everywhere and initialize the library manually. React Spotlight Tour gives you easy to use React hooks that can be used anywhere in your app!

Basic Usage

import { useState } from 'react';
import { SpotlightTour, useSpotlight } from 'react-spotlight-tour';
import Spotlight from 'react-spotlight-tour/spotlight';

function StatusUpdateInput() {
  const spotlightRef = useSpotlight('Update your status');

  // ...

  return (
    <div ref={spotlightRef}>
      <textarea />
      <button>Update status</button>
    </div>
  );
}

function HomePage() {
  const [isOpen, setOpen] = useState(false);

  return (
    <SpotlightTour
      open={isOpen}
      onClose={() => setOpen(false)}
      Spotlight={HighlSpotlightghter}
    >
      <StatusUpdateInput />
    </SpotlightTour>
  );
}