React-custom-tours NPM

React-custom-tours 👩‍🏫🆘🔖

🪲 We recommend installing version starting from 1.3.6 (previous versions have problems) 🎉 A library for creating step-by-step hints in your applications (Click to open in npm) 🧪 Tested on projects in production 🔧 Before each update, the library is checked by autotests ⭐ I would be grateful if you put a star on the GitHub repo

Preview GIF 📹:

ScreenRecording2024-07-21at1 49 43PM-ezgif com-video-to-gif-converter

Custom themes 🌗:

Screenshot 2024-07-21 at 1 48 34 PM Screenshot 2024-07-21 at 1 47 54 PM

Custom colors 💅:

Screenshot 2024-07-21 at 1 49 16 PM

Installation 🔥:

npm install react-custom-tours pnpm install react-custom-tours yarn add react-custom-tours

Features 💫:

Easy to install in any application (installation time up to 10 minutes);
Full customization;
Light/dark mode support out of the box;
Adaptable to all screen sizes;
Keyboard control support;
Animations and smoothness out of the box;
Can be connected to any components. Also, modal windows with closing on the mousedown event will work, since this event has a stopPropagation listener;

The gist 👩‍💻:

import React from 'react';
import { TipsProvider, useTips } from 'react-custom-tours/dist/app/main';

function App() {
  const { setShow } = useTips(); // you should use this hook inside the provider

  // you can start showing tooltips when rendering the component, or add playback conditions
  // useEffect(() => {
  //     setShow(true);
  // }, []);

  return (
    <div>
      {/* click this button to start a tour */}
      <button onClick={() => setShow(true)}>Show tips!</button>
      <div id="tip-block">
        <h3>First block with tip!</h3>
      </div>

      <p id="tip-text">Text with tip!</p>
    </div>
  );
}

function Main() {
  <TipsProvider
    tips={[
      {
        idx: 1, // decent number of tip playback
        nodeId: 'tip-block', // block with tip id
        title: 'First block tip title!', // tip title (optional key)
        text: 'First block tip text!', // tip text
      },
      {
        idx: 2,
        nodeId: 'tip-text',
        text: 'Text block tip text!',
        maxWidth: 400, // max width of tooltip (in pixels)
      },
    ]}
    theme="dark" // light is default (optional)
    customColors={{
      // custom tooltip colors for dark/light themes
      dark: {
        primary: '#0dcaf0',
        highlightBorder: '#dc3545',
      },
      light: {
        primary: 'rgb(21,194,30)',
        highlightBorder: 'rgba(158,113,255,0.42)',
      },
    }}
    highlightPadding={10} // padding for highlighting current block
    escapeToClose // adding closing tour using escape keydown (optional)
    isHiddenClose // hide the close tour button until the last step (optional, default = false) (added in v1.3.8)
  >
    <App />
  </TipsProvider>;
}