|
--- |
|
title: "Installation" |
|
groupTitle: "Introduction" |
|
sort: 1 |
|
--- |
|
|
|
Run one of the following commands to install the package: |
|
|
|
```bash |
|
|
|
npm install driver.js |
|
|
|
|
|
pnpm install driver.js |
|
|
|
|
|
yarn add driver.js |
|
``` |
|
|
|
Alternatively, you can use CDN and include the script in your HTML file: |
|
|
|
```html |
|
<script src="https://cdn.jsdelivr.net/npm/driver.js@latest/dist/driver.js.iife.js"></script> |
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@latest/dist/driver.css"/> |
|
``` |
|
|
|
|
|
Once installed, you can import the package in your project. The following example shows how to highlight an element: |
|
|
|
```js |
|
import { driver } from "driver.js"; |
|
import "driver.js/dist/driver.css"; |
|
|
|
const driverObj = driver(); |
|
driverObj.highlight({ |
|
element: "#some-element", |
|
popover: { |
|
title: "Title", |
|
description: "Description" |
|
} |
|
}); |
|
``` |
|
|
|
|
|
|
|
If you are using the CDN, you will have to use the package from the `window` object: |
|
|
|
```js |
|
const driver = window.driver.js.driver; |
|
|
|
const driverObj = driver(); |
|
|
|
driverObj.highlight({ |
|
element: "#some-element", |
|
popover: { |
|
title: "Title", |
|
description: "Description" |
|
} |
|
}); |
|
``` |
|
|
|
Continue reading the [Getting Started](/docs/basic-usage) guide to learn more about the package. |