# react-light-tour

> lightweight onboarding tour for react

Latest version **0.1.2** (published 2024-07-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-light-tour
pnpm add react-light-tour
yarn add react-light-tour
bun add react-light-tour
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2024-07-23 |
| First published | 2024-07-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 19.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Mohammadreza Zare |
| Maintainers | mohammadreza-zr |
| Keywords | react, ui, tour, onboard, onboarding, light, light-onboarding-tour |

## Links

- npm: https://www.npmjs.com/package/react-light-tour
- Repository: https://github.com/mohammadreza-zr/react-light-tour
- Homepage: https://react-light-tour-docs.vercel.app
- Issues: https://github.com/mohammadreza-zr/react-light-tour/issues
- npm.io page: https://npm.io/package/react-light-tour

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.2 (latest) — 2024-07-23
- 0.1.1 — 2024-07-14
- 0.1.0 — 2024-07-10
- 0.0.5 — 2024-07-07
- 0.0.4 — 2024-07-07
- 0.0.3 — 2024-07-07
- 0.0.2 — 2024-07-07
- 0.0.1 — 2024-07-07

## README

# react light tour

## Description

A lightweight and customizable React component to create a step-by-step tour guide for your application.

## Installation

You can install the package via npm:

```bash
npm install react-light-tour
```

## Example

```jsx filename="demo.jsx" {3} copy
'use client';

import React, { useState } from 'react';
import Tour, { Steps } from 'react-light-tour';

const App = () => {
  const [isTourRunning, setIsTourRunning] = useState(true);

  const steps: Steps = [
    { selector: '#step1', content: 'This is the first step' },
    { selector: '#step2', content: 'This is the second step' },
    { selector: '.step3', content: 'This is the third step' },
  ];

  return (
    <div>
      <button onClick={() => setIsTourRunning(true)}>Start Tour</button>
      <Tour
        isRun={isTourRunning}
        steps={steps}
        bodyScrollDisable={true}
        buttonsClassName={{ next: 'next-btn', preview: 'prev-btn' }}
      />
      <div id="step1">Step 1</div>
      <div id="step2">Step 2</div>
      <div id="step3">Step 3</div>
    </div>
  );
};

export default App;
```

## Props

The `react-light-tour` component accepts the following props:

- `isRun`: Flag to start or stop the tour.
- `steps`: Array of steps for the tour.
- `buttonsClassName`: (Optional) Class names for next and preview buttons.
- `saveKey`: (Optional) Key for saving tour completion state in local storage.
- `nextText`: (Optional) Text for the next button.
- `previewText`: (Optional) Text for the preview button.
- `doneText`: (Optional) Text for the done button.
- `bodyScrollDisable`: (Optional) body scrolling while tour is run.
- `scrollLogicalPosition`: (Optional) scroll to center is default.

# Screenshots

<img src="https://react-light-tour-docs.vercel.app/Screenshot-react-light-tour.png" alt="Screenshot-react-light-tour" width="400" style="object-fit:contain;">

---
_Source: https://npm.io/package/react-light-tour · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._