Package Exports

use-driver
use-driver/dist/index.js
use-driver/dist/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (use-driver) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

use-driver

cover

This is a simple plugin for using Driver.js in your React.js application.

Installation

via npm:

npm install use-driver

via yarn:

yarn add use-driver

via pnpm:

pnpm add use-driver

Usage

import { useEffect } from "react";

import useDriver from "use-driver";
import "use-driver/dist/driver.css";

export default function Home() {
  const { drive, register } = useDriver();

  useEffect(() => {
    if (!drive) return;

    drive();
  }, [drive]);

  return (
    <div className="flex flex-col items-center justify-center h-screen">
      <dl className="-my-3 divide-y divide-gray-100 text-sm w-1/2 border p-8 rounded-xl">
        <div className="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
          <dt className="font-medium text-gray-900">Name</dt>
          <dd
            {...register({
              order: 1,
              popover: {
                title: "Name",
                description:
                  "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
              },
            })}
            className="text-gray-700 sm:col-span-2"
          >
            John Frusciante
          </dd>
        </div>
        <div className="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
          <dt className="font-medium text-gray-900">Occuputation</dt>
          <dd
            {...register({
              order: 2,
              popover: {
                title: "Occuputation",
                description:
                  "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
              },
            })}
            className="text-gray-700 sm:col-span-2"
          >
            Guitarist
          </dd>
        </div>
        <div className="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
          <dt className="font-medium text-gray-900">Bio</dt>
          <dd
            {...register({
              order: 3,
              popover: {
                title: "Bio",
                description:
                  "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
              },
            })}
            className="text-gray-700 sm:col-span-2"
          >
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et facilis
            debitis explicabo doloremque impedit nesciunt dolorem facere, dolor
            quasi veritatis quia fugit aperiam aspernatur neque molestiae labore
            aliquam soluta architecto?
          </dd>
        </div>
      </dl>
    </div>
  );
}