Driver.jsx

Create a Seamless User Onboarding and User Journey in React.

A lightweight and fast wrapper hooks (stable) and components (in-development) for driver library that can be used in React > 17.

It uses driver.js that is performant, lightweight and have inbuilt animations.

Demo

demo.webm

Install

To reduce package size, we have removed driver.js dependency from the project. Before installing please install driver.js.

NPM

npm install driver.jsx

Yarn

yarn add driver.jsx

Getting Started

import { useEffect, useRef } from "react";
import { useDriver } from "driver.jsx";
import "driver.js/dist/driver.css";

const { driver, isActivated } = useDriver({
  allowClose: false,
});

const basicRef = useRef(null);

useEffect(() => {
  if (basicRef && isActivated) {
    driver.highlight({
      element: basicRef.current,
      popover: {
        title: "Title for the Popover",
        description: "Description for it",
      },
    });
  }
});

Example

All of the Examples are placed in examples directory

Development

Setting up a local development environment is easy!

Clone (or fork) this repo on your machine, navigate to its location in the terminal and run:

yarn install
yarn start:dev

Change the code in the lib directory, create an example for in the examples directory or in the src directory

Start coding! 🥳