react-interactive-tour

react-interactive-tour

react-interactive-tour is a lightweight and highly customizable library for creating interactive guided tours in your ReactJs and NextJs applications. Enhance user onboarding and feature discovery with step-by-step instructions and visually appealing tour components.

Live Demo

Install

npm install react-interactive-tour

or

yarn add react-interactive-tour

Key Features:

• Easy to Use: Simple component to create tours quickly.

• Highly Customizable: Customize the look and feel to match your application's design.

• Flexible Positioning: Position tooltips relative to elements with various options.

• Responsive Design: Ensure tours look great on all devices.

• Step Control: Control the flow of the tour with next, previous, and finish actions.

How to use:

Wrap entire react app into ReactTourProvider component :

import MyCom from './Components/MyCom'
import ReactTourProvider from 'react-interactive-tour';

function App() {

  return (
    <>
        <ReactTourProvider cache={true}>
            <MyCom / >
        </ReactTourProvider>
    </>
  )
}

export default App

Properties

Property	Type	Required	Default Value	Description
backgroundColor	string	No	#fff	Background color of the tour overlay.
buttonTextColor	string	No	#4285f4	Text color of the tour navigation buttons.
buttonBackgroundColor	string	No	#4285f4	Background color of the tour navigation buttons.
cache	boolean	Yes	false	Determines if the tour state should be cached.
children	ReactElement	Yes	-	The content or components that the provider wraps.

Wrap ReactTour component to your component:

import ReactTour from 'react-interactive-tour';
import {ShimmerButton} from "shimmer-effect-react";

function Page() {

  return (
    <>
        <ReactTour index={0} position='top' body={<div><strong>React Interactive Tour</strong><br />Welcome to react interactive tour.</div>}>
            <ShimmerButton size='lg' mode="light" />
          </ReactTour>
    </>
  )
}

export default Page

Properties

Property	Type	Required	Default Value	Description
index	number	Yes	-	The step index in the tour sequence.
position	"top" | "right" | "bottom" | "left"	Yes	-	The position of the tooltip relative to the target element.
body	ReactElement	Yes	-	The content to display in the tooltip.
children	ReactElement	Yes	-	The target element around which the tooltip will be displayed.

More Features Coming Soon:

Stay tuned for exciting updates and expansions to the react-interactive-tour library! Our team is hard at work developing additional components and features to further enhance your experience with react tour in React applications. Keep an eye on our roadmap for upcoming releases, and be the first to explore new functionalities as they become available.

Contributions and Feedback:

We welcome contributions, bug reports, and feature requests from the community. Whether you're interested in submitting a pull request, reporting a bug, or sharing your ideas for enhancements, your input is invaluable in shaping the future of the react-interactive-tour library. Thank you for your support and collaboration!