driver.js README

The project's README from github.com/nilbuild/driver.js. As one markdown file: README.md.




Driver.js

jsdelivr hits downloads

Powerful, highly customizable library for Product Tours and Feature Introductions
No external dependencies, light-weight, supports all major browsers and highly customizable



Documentation

For demos and documentation, visit driverjs.com


So, yet another tour library?

No, it's more than a tour library. Tours are just one of the many use-cases. Driver.js can be used wherever you need some sort of overlay for the page; some common usecases could be: highlighting a page component when user is interacting with it to keep them focused, providing contextual help e.g. popover with dimmed background when user is filling a form, using it as a focus shifter to bring user's attention to some component on page, using it to simulate those "Turn off the Lights" widgets that you might have seen on video players online, usage as a simple modal, and of-course product tours etc.

Driver.js is written in Vanilla TypeScript, has zero dependencies and is highly customizable. It has several options allowing you to change how it behaves and also provides you the hooks to manipulate the elements as they are highlighted, about to be highlighted, or deselected.

Also, comparing the size of Driver.js with other libraries, it's the most light-weight, it is just ~5kb gzipped while others are 12kb+.


Developing locally

The library lives in src/. To try your changes against a set of live examples, run the playground — an Astro app in playground/ that imports the library straight from source, so edits hot-reload instantly:

pnpm install
pnpm run playground:install
pnpm dev

Each example lives in its own file under playground/src/examples/ and shows up as a page in the sidebar. To add one, drop an entry into the relevant group (highlight.ts, popover.ts, tour.ts, api.ts).

Other useful scripts:

pnpm build
pnpm test

Contributions

Feel free to submit pull requests, create issues or spread the word.

License

MIT © Kamran Ahmed

driver.js (nilbuild/driver.js)

Searching Database…

26.9K ·GitHub
Driver.js
这是什么？Driver.js 是一个轻量级 JavaScript 库，用于制作产品导览、功能介绍和聚光灯式遮罩层，引导用户把注意力集中到网页的特定位置。
它是框架还是普通库？它是一个独立的库，没有任何外部依赖，使用 Vanilla TypeScript（不依赖任何框架）编写，可以导入到任何网页应用中。
我该如何把它添加到项目中？将它作为包安装，然后导入到你的 JS/TS 应用中；使用示例和完整文档可在 driverjs.com 文档站点查看。
使用它还需要其他库吗？不需要，它完全没有外部依赖，开箱即可在所有主流浏览器中使用。
这只能用来做导览，还是也能用在其他遮罩层上？它不仅仅是导览工具：你还可以用它制作上下文帮助气泡、焦点切换、背景变暗的弹窗，或“关灯”式的组件，而不只是引导导览。
和其他导览库相比，它有多大？Driver.js 经 gzip 压缩后约 5kb，而同类库通常在 12kb 以上，是最轻量的选择之一。
元素被高亮时，我能控制会发生什么吗？可以，它提供了钩子，让你能在元素即将被高亮时、高亮期间，或取消选中时对元素进行操作。
能通过键盘操作吗？可以，Driver.js 的所有功能都支持键盘控制，对无障碍使用很友好。
我如何在本地试用示例？克隆仓库并运行基于 Astro 的 playground 应用，它会直接从源码导入库，并在修改后热重载；示例位于 playground/src/examples/ 下。
What are similar projects?shepherd, floating-ui, intro.js, react-dropzone, tippyjs, You-Dont-Need-JavaScript, material-ui, styled-components
Which topics is it in?spotlight, overlay, ui, productivity, frontend, library, typescript, javascript, web, developer-tools, mit, open-source
Creator
nilbuild
Size
8.5 MB
Stars
26.9K
Updated
CommitOct 15Release1.10.1Oct 15
Age
8y
Commits · 90 Days