Package Exports

react-tour-guild
react-tour-guild/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-tour-guild) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Tour Guild

This project uses react-tour-guild to create guided tours in your React application.

Prerequisites

Before using react-tour-guild, you need to install tailwindcss. You can install it using npm by following the Tailwind CSS installation guide.

Installation

To install react-tour-guild, you can use npm:

npm install react-tour-guild

Usage

Here is a basic example of how to use react-tour-guild in your project:

// main.ts
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { TourProvider } from 'react-tour-guild';
import App from './App';

const EXAMPLE_STEPS = [{
  id: 'step-1',
  title: 'Step 1',
  description: 'This is the first step',
  stepIndex: 1,
}, {
  id: 'step-2',
  title: 'Step 2',
  description: 'This is the second step',
  stepIndex: 2,
}]

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <TourProvider allSteps={EXAMPLE_STEPS}>
      <App />
    </TourProvider>
  </StrictMode>,
);

Example

Here's how to use react-tour-guild with a simple React app:

// App.tsx
import { useState } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img id='step-1' src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1 id='step-2'>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>Edit <code>src/App.tsx</code> and save to test HMR</p>
      </div>
    ```typescript
      </div>
      );
    }

    export default App;

Documentation

For more detailed information, please refer to the react-tour-guild documentation.

License

This project is licensed under the MIT License.