react-guideme

React GuideMe Library

GuideMe is a React library designed to provide a captivating onboarding experience for your users. With interactive modals and step-by-step guidance, you can easily create guided tours that will leave a lasting impression on your users, ensuring a seamless onboarding process.

Features

• Step-by-Step Guidance: Initiate step-by-step guidance for new users with a click of a button.
• Customizable Design: Easily customize the design of the component to match your application's style.
• Auto Tour Options: Activate the auto-tour feature to guide users through your application automatically.
• Developer-Friendly Integration: Seamlessly integrate this component into your React application.

Installation

Follow these simple steps to get started with GuideMe:

1. Install GuideMe Package

   Install the GuideMe package from npm by running the following command in your terminal or command prompt:

$ npm install react-guideme

1. Import SCSS File

After installing GuideMe, import the SCSS file into your project to apply the necessary styles for the guided tour. In your SCSS file (e.g., App.scss), add the following line:

@import "~react-guideme/dist/guideme.css";

1. Write the Code

You're now ready to create interactive guided tours for your application! Import the GuideMe component and define the steps for your tour. Here's an example of how to use GuideMe in your React component:

import React from 'react';
import GuideMe from 'react-guideme';

function App() {
  const steps = [
    {
      selector: '.step-1', // Add a CSS selector for the element you want to highlight in step 1
      title: 'Step 1',
      content: 'This is the content of step 1.',
      modalPosition: 'right', // Choose the position of the modal (left, right, top, bottom)
    },
  ];

  return (
    <>
      <GuideMe steps={steps} automatic={false} theme="light" />
      <div className="step-1"></div>
    </>
  );
}

export default App;

Themes and Color Customization

GuideMe provides a variety of captivating themes and extensive color customization options, allowing you to tailor the appearance of your guided tours to match your brand and application style. Choose from the following themes:

• Light Theme: A clean and minimalistic theme that suits a bright and modern application design.
• Dark Theme: A sleek and sophisticated theme for applications with a darker color scheme.
• Ice Theme: A cool and refreshing theme with icy blue tones, perfect for a unique user experience.
• Forest Theme: A nature-inspired theme featuring earthy green tones, ideal for eco-friendly applications.

Elevate user engagement and create a seamless onboarding experience by choosing the perfect theme and color scheme that best represents your product.

Props

GuideMe accepts the following props for further customization:

• steps: An array of step objects containing the details for each guided tour step. Each step object includes:

  • selector: A CSS selector for the element you want to highlight in the step.
  • title: The title of the step.
  • content: The content or instructions for the step.
  • modalPosition: Choose the position of the modal relative to the highlighted element (left, right, top, bottom).

• automatic: A boolean value that determines whether the guided tour should automatically progress through the steps without user input. (Default: false)

• theme: A string that specifies the theme for the guided tour. Choose from "light," "dark," "ice," or "forest." (Default: "light")

• isProgressBar: A boolean value that enables a progress bar to indicate the user's position in the guided tour. (Default: false)

Feel free to adjust these props according to your requirements to create the perfect onboarding experience for your users.

Connect

Stay in the loop with the latest updates and news about GuideMe.