\n
\n \n \n ![\"Astro\"](\"/driver-head.svg\")
\n driver.js\n \n
\n \n driver.js\n \n \n \n
\n \n {Object.entries(groupedGuides).map(([category, guides]) => (\n
\n \n );\n}\n"
},
{
"path": "docs/src/components/ExampleButton.tsx",
"content": "type ExampleButtonProps = {\n id: string;\n onClick: () => void;\n text: string;\n};\n\nexport function ExampleButton(props: ExampleButtonProps) {\n const { id, onClick, text } = props;\n\n return (\n \n
\n ))}\n {category}
\n \n {guides.map(guide => (\n \n {guide.data.title}\n \n ))}\n
\n Examples
\nHere are just a few examples; find more
\n \n \n
\n"
},
{
"path": "docs/src/components/FormHelp.tsx",
"content": "import { useEffect } from \"react\";\nimport { driver } from \"driver.js\";\nimport \"driver.js/dist/driver.css\";\n\nexport function FormHelp() {\n useEffect(() => {\n const driverObj = driver({\n popoverClass: \"driverjs-theme\",\n stagePadding: 0,\n onDestroyed: () => {\n (document?.activeElement as any)?.blur();\n }\n });\n\n const nameEl = document.getElementById(\"name\");\n const educationEl = document.getElementById(\"education\");\n const ageEl = document.getElementById(\"age\");\n const addressEl = document.getElementById(\"address\");\n const submitEl = document.getElementById(\"submit-btn\");\n\n nameEl!.addEventListener(\"focus\", () => {\n driverObj.highlight({\n element: nameEl!,\n popover: {\n title: \"Name\",\n description: \"Enter your name here\",\n },\n });\n });\n\n educationEl!.addEventListener(\"focus\", () => {\n driverObj.highlight({\n element: educationEl!,\n popover: {\n title: \"Education\",\n description: \"Enter your education here\",\n },\n });\n });\n\n ageEl!.addEventListener(\"focus\", () => {\n driverObj.highlight({\n element: ageEl!,\n popover: {\n title: \"Age\",\n description: \"Enter your age here\",\n },\n });\n });\n\n addressEl!.addEventListener(\"focus\", () => {\n driverObj.highlight({\n element: addressEl!,\n popover: {\n title: \"Address\",\n description: \"Enter your address here\",\n },\n });\n });\n\n submitEl!.addEventListener(\"focus\", (e) => {\n e.preventDefault();\n driverObj.destroy();\n });\n });\n\n return <>;\n}\n"
},
{
"path": "docs/src/components/HeroSection.astro",
"content": "---\nimport Container from \"./Container.astro\";\n---\n\n\n
\n Nothing else like it
\n\n Lightweight with no external dependencies, supports all major browsers and is highly customizable.\n
\n\n
\n \n
\n \n
\n Browser Support
\n\n Works in all modern browsers including Chrome, IE9+, Safari, Firefox and Opera\n
\n\n
\n \n
\n Mobile Ready
\nWorks on desktop, tablets and mobile devices
\n\n
\n \n
\n Highly Customizable
\nPowerful API that allows you to customize it to your needs
\n\n
\n \n
\n Lightweight
\n\n Only 5KB minified, compared to other libraries which are typically >12KB minified\n
\n\n
\n \n
\n No Dependencies
\nSimple to use with absolutely no external dependencies
\n\n
\n \n
\n Feature Rich
\nCreate powerful feature introductions for your web applications
\n\n
\n \n MIT\n
\n MIT License
\nFree for both personal and commercial use
\n\n
\n \n
\n Keyboard Control
\nAll actions can be controlled via keyboard
\n\n
\n \n ALL\n
\n Highlight Anything
\nHighlight any element on the page
\n\n \n \n
\n\n \n ![\"driver.js](\"/favicon.svg\")
\n driver.js\n \n \n \n Documentation\n Docs\n \n GitHub\n \n
\n \n driver.js\n \n \n \n Documentation\n Docs\n \n GitHub\n \n \n \n \n
\n"
},
{
"path": "docs/src/components/OpenSourceLove.astro",
"content": "---\nimport Container from \"./Container.astro\";\nimport { getFormattedStars } from \"../lib/github\";\n\nconst starCount = getFormattedStars('kamranahmedse/driver.js');\n---\n\n
\n \n
\n driver.js
\n\n Lightweight JavaScript library for product tours, highlights, and contextual help to guide users through your\n product.\n
\n\n \n Show Demo\n \n \n Get Started\n \n
\n \n ![\"driver.js](\"/driver.svg\")
\n
\n \n \n \n \n
"
},
{
"path": "docs/src/components/Sidebar.astro",
"content": "---\nimport { getCollection, getEntry } from \"astro:content\";\nimport { getFormattedStars } from \"../lib/github\";\nimport { getAllGuides } from \"../lib/guide\";\n\nexport interface Props {\n activePath: string;\n}\n\nconst { activePath, groupedGuides, activeGuideTitle } = Astro.props;\n---\n\n ![\"Hero](\"/thumbs.svg\")
\n
\n \n
\n Loved by Many
\nWith millions of downloads, Driver.js is an MIT licensed\n opensource\n project and is used by\n thousands of companies around the world.
\n\n \n![\"Hero](\"/star.svg\")
{ starCount }\n \n
"
},
{
"path": "docs/src/components/UsecaseItem.astro",
"content": "---\nexport interface Props {\n title: string;\n description: string;\n}\n\nconst { title, description } = Astro.props;\n---\n\n\n
\n\n \n \n \n
\n\n {Object.keys(groupedGuides).map(groupTitle => {\n const guides = groupedGuides[groupTitle];\n\n return (\n <>\n \n \n {groupTitle}
\n- \n {guides.map(guide => {\n const guidePath = `/docs/${guide.slug}`;\n return (\n
- \n {guide.data.title}\n \n );\n })}\n
\n \n
"
},
{
"path": "docs/src/components/UsecaseList.astro",
"content": "---\nimport UsecaseItem from \"./UsecaseItem.astro\";\n---\n\n { title }\n
\n\n { description }\n
\nDue to its extensive API, driver.js can be used for a wide range of use\n cases.
\n\n
\n"
},
{
"path": "docs/src/content/config.ts",
"content": "import { z, defineCollection } from \"astro:content\";\n\nconst guidesCollection = defineCollection({\n type: \"content\",\n schema: z.object({\n groupTitle: z.string(),\n title: z.string(),\n sort: z.number(),\n }),\n});\n\nexport const collections = {\n guides: guidesCollection,\n};\n"
},
{
"path": "docs/src/content/guides/animated-tour.mdx",
"content": "---\ntitle: \"Animated Tour\"\ngroupTitle: \"Examples\"\nsort: 2\n---\n\nimport { CodeSample } from \"../../components/CodeSample.tsx\";\n\nThe following example shows how to create a simple tour with a few steps. Click the button below the code sample to see the tour in action.\n\n\n > **Note:** When using the `highlight` method to highlight a single element, the only button shown is the `close`\n button. However, you can use the `showButtons` option to show other buttons as well. But the buttons won't do\n anything. You will have to use the `onNextClick` and `onPrevClick` callbacks to implement the functionality.\n
\n\n\n \n ```js\n import { driver } from \"driver.js\";\n import \"driver.js/dist/driver.css\";\n\n const driverObj = driver({\n showButtons: [\n 'next',\n 'previous',\n 'close'\n ],\n steps: [\n {\n element: '#first-element',\n popover: {\n title: 'Popover Title',\n description: 'Popover Description'\n }\n },\n {\n element: '#second-element',\n popover: {\n title: 'Popover Title',\n description: 'Popover Description'\n }\n }\n ]\n });\n\n driverObj.drive();\n ```\n \n
\n\n## Change Button Text\n\nYou can also change the text of buttons using `nextBtnText`, `prevBtnText` and `doneBtnText` options.\n\n\n ',\n prevBtnText: '<--',\n doneBtnText: 'X',\n }}\n tour={[\n {\n element: '#code-sample-3',\n popover: {\n title: 'Popover Title',\n description: 'Popover Description'\n }\n },\n {\n element: '#code-sample-3 code',\n popover: {\n title: 'Popover Title',\n description: 'Popover Description'\n }\n }\n ]}\n id={\"code-sample-3\"}\n client:load>\n ```js\n import { driver } from \"driver.js\";\n import \"driver.js/dist/driver.css\";\n\n const driverObj = driver({\n nextBtnText: '—›',\n prevBtnText: '‹—',\n doneBtnText: '✕',\n showProgress: true,\n steps: [\n // ...\n ]\n });\n\n driverObj.drive();\n ```\n \n
\n\n## Event Handlers\n\nYou can use the `onNextClick`, `onPreviousClick` and `onCloseClick` callbacks to implement custom functionality when the user clicks on the next and previous buttons.\n\n> Please note that when you configure these callbacks, the default functionality of the buttons will be disabled. You will have to implement the functionality yourself.\n\n\n
\n\nUse the buttons below to show the popover.
\n\n left and align set to start. PS, we can use HTML in the title and descriptions of popover.',\n side: \"left\",\n align: 'start'\n }\n }}\n id={\"left-start\"}\n client:load\n />\n\n left and align set to center. PS, we can use HTML in the title and descriptions of popover.',\n side: \"left\",\n align: 'center'\n }\n }}\n id={\"left-start\"}\n client:load\n />\n\n left and align set to end. PS, we can use HTML in the title and descriptions of popover.',\n side: \"left\",\n align: 'end'\n }\n }}\n id={\"left-start\"}\n client:load\n />\n\n top and align set to start. PS, we can use HTML in the title and descriptions of popover.',\n side: \"top\",\n align: 'start'\n }\n }}\n id={\"top-start\"}\n client:load\n />\n\n top and align set to center. PS, we can use HTML in the title and descriptions of popover.',\n side: \"top\",\n align: 'center'\n }\n }}\n id={\"top-start\"}\n client:load\n />\n\n top and align set to end. PS, we can use HTML in the title and descriptions of popover.',\n side: \"top\",\n align: 'end'\n }\n }}\n id={\"top-start\"}\n client:load\n />\n\n right and align set to start. PS, we can use HTML in the title and descriptions of popover.',\n side: \"right\",\n align: 'start'\n }\n }}\n id={\"right-start\"}\n client:load\n />\n\n right and align set to center. PS, we can use HTML in the title and descriptions of popover.',\n side: \"right\",\n align: 'center'\n }\n }}\n id={\"right-start\"}\n client:load\n />\n\n right and align set to end. PS, we can use HTML in the title and descriptions of popover.',\n side: \"right\",\n align: 'end'\n }\n }}\n id={\"right-start\"}\n client:load\n />\n\n bottom and align set to start. PS, we can use HTML in the title and descriptions of popover.',\n side: \"bottom\",\n align: 'start'\n }\n }}\n id={\"bottom-start\"}\n client:load\n />\n\n bottom and align set to center. PS, we can use HTML in the title and descriptions of popover.',\n side: \"bottom\",\n align: 'center'\n }\n }}\n id={\"bottom-start\"}\n client:load\n />\n\n bottom and align set to end. PS, we can use HTML in the title and descriptions of popover.',\n side: \"bottom\",\n align: 'end'\n }\n }}\n id={\"right-start\"}\n client:load\n />\n
"
},
{
"path": "docs/src/content/guides/prevent-destroy.mdx",
"content": "---\ntitle: \"Prevent Tour Exit\"\ngroupTitle: \"Examples\"\nsort: 3\n---\n\nimport { CodeSample } from \"../../components/CodeSample.tsx\";\n\nYou can also prevent the user from exiting the tour using `allowClose` option. This option is useful when you want to force the user to complete the tour before they can exit.\n\nIn the example below, you won't be able to exit the tour until you reach the last step.\n\n
Yet another highlight example.\",\n }\n})\n```\n\nFocus on the input below and see how the popover is shown.\n\n\n\n\n
\n"
},
{
"path": "docs/src/content/guides/styling-popover.mdx",
"content": "---\ntitle: \"Styling Popover\"\ngroupTitle: \"Examples\"\nsort: 2\n---\n\nimport { CodeSample } from \"../../components/CodeSample.tsx\";\n\nYou can either use the default class names and override the styles or you can pass a custom class name to the `popoverClass` option either globally or per step.\n\nAlternatively, if want to modify the Popover DOM, you can use the `onPopoverRender` callback to get the popover DOM element and do whatever you want with it before popover is rendered.\n\nWe have added a few examples below but have a look at the [theming section](/docs/theming#styling-popover) for detailed guide including class names to target etc.\n\n\n\n
\n
\n \n \n
\n \n{guide.data.title}
\n\n \n \n
\n\n \n \n \n
\n\n MIT Licensed © 2024\n \n ·\n \n Docs\n \n \n GitHub\n ![\"GitHub\"](\"/arrow.svg\"){kind=icon}
\n \n \n Twitter\n \n \n \n
\n
\n
\n
\n \n \n\n"
},
{
"path": "license",
"content": "The MIT License\n\nCopyright (c) Kamran Ahmed\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE."
},
{
"path": "package.json",
"content": "{\n \"name\": \"driver.js\",\n \"license\": \"MIT\",\n \"private\": false,\n \"version\": \"1.4.0\",\n \"main\": \"./dist/driver.js.cjs\",\n \"module\": \"./dist/driver.js.mjs\",\n \"types\": \"./dist/driver.js.d.ts\",\n \"homepage\": \"https://driverjs.com\",\n \"repository\": \"https://github.com/kamranahmedse/driver.js\",\n \"author\": \"Kamran Ahmed \n
\n\n driver.js next
\nRewritten and enhanced version of driver.js
\nHighlight Feature
\ngiven below are the examples of simple `highlight`
\n \n\n
given below are the examples of simple `highlight`
\n \n\n\n
You can modify the popover as well with custom CSS and JS.
\n \n\nTour Feature
\nExamples below show the tour usage of driver.js.
\n \n\n- \n
- Written in TypeScript \n
- Lightweight — only 5kb gzipped \n
- No dependencies \n
- MIT Licensed \n
- \n
- Hooks Button Demo — List of hooks fired \n
Yet another Tour Library?
\n\n No, it is not. Tours are just one of the many use-cases. Driver.js can be used wherever you need some sort of\n overlay for the page; some common usecases could be: e.g. dimming the background when user is interacting with\n some component, using it as a focus shifter to bring user's attention to some component on page, or using it to\n simulate those \"Turn off the Lights\" widgets that you might have seen on video players online, etc.\n
\n\n Driver.js is written in Vanilla JS, has zero dependencies and is highly customizable. It has several options\n allowing you to manipulate how it behaves and also provides you the hooks to manipulate the elements as they are\n highlighted, about to be highlighted, or deselected.\n
\n\nInstallation
\nYou can install it using yarn or npm, whatever you prefer.
\n\n\nyarn add driver.js\nnpm install driver.js\n\nOr include it using CDN — put the version as driver.js@0.5 in the name
\n\nhttps://unpkg.com/driver.js/dist/driver.min.js\n\nUsage and Demo
\n\n\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi blanditiis consectetur ea eligendi id in\n inventore ipsa iure laudantium libero, minus molestias necessitatibus nesciunt non omnis, quasi recusandae\n tempore voluptates! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi blanditiis consectetur ea\n eligendi id in inventore ipsa iure laudantium libero, minus molestias necessitatibus nesciunt non omnis, quasi\n recusandae tempore voluptates!\n
\n\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi blanditiis consectetur ea eligendi id in\n inventore ipsa iure laudantium libero, minus molestias necessitatibus nesciunt non omnis, quasi recusandae\n tempore voluptates!\n
\n\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi blanditiis consectetur ea eligendi id in\n inventore ipsa iure laudantium libero, minus molestias necessitatibus nesciunt non omnis, quasi recusandae\n tempore voluptates!\n
\n\n\n\n First -> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dicta ipsum labore quod\n tempora ullam? Alias consequatur doloremque laborum maxime necessitatibus nostrum odio, officiis quibusdam\n veniam! Doloribus eos id quaerat.\n
\n\n Second -> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dicta ipsum labore quod\n tempora ullam? Alias consequatur doloremque laborum maxime necessitatibus nostrum odio, officiis quibusdam\n veniam! Doloribus eos id quaerat.\n
\n\n Third -> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dicta ipsum labore quod\n tempora ullam? Alias consequatur doloremque laborum maxime necessitatibus nostrum odio, officiis quibusdam\n veniam! Doloribus eos id quaerat.\n
\n\n Fourth -> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dicta ipsum labore quod\n tempora ullam? Alias consequatur doloremque laborum maxime necessitatibus nostrum odio, officiis quibusdam\n veniam! Doloribus eos id quaerat.\n
\n\n Fifth -> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dicta ipsum labore quod\n tempora ullam? Alias consequatur doloremque laborum maxime necessitatibus nostrum odio, officiis quibusdam\n veniam! Doloribus eos id quaerat.\n
\n\n Sixth -> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dicta ipsum labore quod\n tempora ullam? Alias consequatur doloremque laborum maxime necessitatibus nostrum odio, officiis quibusdam\n veniam! Doloribus eos id quaerat.\n
\n\n Seventh -> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dicta ipsum labore quod\n tempora ullam? Alias consequatur doloremque laborum maxime necessitatibus nostrum odio, officiis quibusdam\n veniam! Doloribus eos id quaerat.\n
\n\n Eighth -> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dicta ipsum labore quod\n tempora ullam? Alias consequatur doloremque laborum maxime necessitatibus nostrum odio, officiis quibusdam\n veniam! Doloribus eos id quaerat.\n
\n\n Ninth -> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dicta ipsum labore quod\n tempora ullam? Alias consequatur doloremque laborum maxime necessitatibus nostrum odio, officiis quibusdam\n veniam! Doloribus eos id quaerat.\n
\n\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi blanditiis consectetur ea eligendi id in\n inventore ipsa iure laudantium libero, minus molestias necessitatibus nesciunt non omnis, quasi recusandae\n tempore voluptates!\n
\n\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi blanditiis consectetur ea eligendi id in\n inventore ipsa iure laudantium libero, minus molestias necessitatibus nesciunt non omnis, quasi recusandae\n tempore voluptates!\n
\n\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi blanditiis consectetur ea eligendi id in\n inventore ipsa iure laudantium libero, minus molestias necessitatibus nesciunt non omnis, quasi recusandae\n tempore voluptates!\n
\n\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi blanditiis consectetur ea eligendi id in\n inventore ipsa iure laudantium libero, minus molestias necessitatibus nesciunt non omnis, quasi recusandae\n tempore voluptates!\n
\n\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi blanditiis consectetur ea eligendi id in\n inventore ipsa iure laudantium libero, minus molestias necessitatibus nesciunt non omnis, quasi recusandae\n tempore voluptates!\n
\n
![](\"https://driverjs.com/driver.svg\")
Driver.js
\n\n\n\n![](\"https://img.shields.io/badge/License-MIT-yellow.svg\"){kind=icon}
\n ![\"downloads\"](\"https://img.shields.io/npm/dm/driver.js\")
\n \n Powerful, highly customizable vanilla JavaScript engine to drive user's focus on the page\n No external dependencies, light-weight, supports all major browsers and highly customizable
\n
\n\n- **Simple**: is simple to use and has no external dependency at all\n- **Light-weight**: is just 5kb gzipped as compared to other libraries which are +12kb gzipped\n- **Highly customizable**: has a powerful API and can be used however you want\n- **Highlight anything**: highlight any (literally any) element on page\n- **Feature introductions**: create powerful feature introductions for your web applications\n- **Focus shifters**: add focus shifters for users\n- **User friendly**: Everything is controllable by keyboard\n- **TypeScript**: Written in TypeScript\n- **Consistent behavior**: usable across all browsers\n- **MIT Licensed**: free for personal and commercial use\n\n
\n\n## Documentation\n\nFor demos and documentation, visit [driverjs.com](https://driverjs.com)\n\n
\n\n## So, yet another tour library?\n\n**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](https://i.imgur.com/TS0LSK9.png) when user is interacting with some component 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.\n\nDriver.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.\n\n> 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+.\n\n
\n\n## Contributions\n\nFeel free to submit pull requests, create issues or spread the word.\n\n## License\n\nMIT © [Kamran Ahmed](https://twitter.com/kamrify)\n" }, { "path": "src/config.ts", "content": "import { Driver, DriveStep } from \"./driver\";\nimport { AllowedButtons, PopoverDOM } from \"./popover\";\nimport { State } from \"./state\";\n\nexport type DriverHook = (\n element: Element | undefined,\n step: DriveStep,\n opts: { config: Config; state: State; driver: Driver }\n) => void;\n\nexport type Config = {\n steps?: DriveStep[];\n\n animate?: boolean;\n overlayColor?: string;\n overlayOpacity?: number;\n smoothScroll?: boolean;\n allowClose?: boolean;\n overlayClickBehavior?: \"close\" | \"nextStep\" | DriverHook;\n stagePadding?: number;\n stageRadius?: number;\n\n disableActiveInteraction?: boolean;\n\n allowKeyboardControl?: boolean;\n\n // Popover specific configuration\n popoverClass?: string;\n popoverOffset?: number;\n showButtons?: AllowedButtons[];\n disableButtons?: AllowedButtons[];\n showProgress?: boolean;\n\n // Button texts\n progressText?: string;\n nextBtnText?: string;\n prevBtnText?: string;\n doneBtnText?: string;\n\n // Called after the popover is rendered\n onPopoverRender?: (popover: PopoverDOM, opts: { config: Config; state: State, driver: Driver }) => void;\n\n // State based callbacks, called upon state changes\n onHighlightStarted?: DriverHook;\n onHighlighted?: DriverHook;\n onDeselected?: DriverHook;\n onDestroyStarted?: DriverHook;\n onDestroyed?: DriverHook;\n\n // Event based callbacks, called upon events\n onNextClick?: DriverHook;\n onPrevClick?: DriverHook;\n onCloseClick?: DriverHook;\n};\n\nlet currentConfig: Config = {};\nlet currentDriver: Driver;\n\nexport function configure(config: Config = {}) {\n currentConfig = {\n animate: true,\n allowClose: true,\n overlayClickBehavior: \"close\",\n overlayOpacity: 0.7,\n smoothScroll: false,\n disableActiveInteraction: false,\n showProgress: false,\n stagePadding: 10,\n stageRadius: 5,\n popoverOffset: 10,\n showButtons: [\"next\", \"previous\", \"close\"],\n disableButtons: [],\n overlayColor: \"#000\",\n ...config,\n };\n}\n\nexport function getConfig(): Config;\nexport function getConfig