useDriver

Permite usar driver.js de forma mas sencilla.

• Devuelve un objeto de driverObj que, a su vez, será el encargado de realizar el tour.

Implementación del Composable:

// Importamos la función principal `driver` y el tipo `DriveStep` desde la librería driver.js
import { driver, type DriveStep } from 'driver.js'

// Importamos los estilos por defecto de driver.js
import 'driver.js/dist/driver.css'

// Importamos estilos personalizados que sobreescriben o complementan los de driver.js
import '@/assets/styles/driver.scss'

// Importamos un tipo personalizado para el contenido localizado del tour
import type { DriverTour } from '@/types/driver'

/**
 * Hook personalizado para inicializar un tour interactivo usando driver.js
 *
 * @param elementDrivers - Array de selectores CSS (como clases o IDs) de los elementos a resaltar
 * @param contents - Array de claves que se usarán para obtener el contenido traducido de cada paso
 * @param driverLocale - Objeto de localización con los textos para los pasos y botones
 * @param onDestroyedCallback - Uno o más callbacks que se ejecutan cuando el tour finaliza  (útil para encadenar tours).
 * @returns Objeto con la instancia de driver si hay elementos válidos, o `null` si no hay
 */
export const useDriver = (
  elementDrivers: string[],
  contents: string[],
  driverLocale: DriverTour,
  ...onDestroyedCallback: (() => void)[]
) => {
  // Unimos todos los selectores en una sola cadena separada por comas para el querySelectorAll
  const selector = elementDrivers.join(', ')
  const items = Array.from(document.querySelectorAll(selector))

  // Si no se encuentran elementos en el DOM, salimos de la función
  if (items.length === 0) return null

  // Creamos los pasos del tour a partir de los elementos encontrados y sus contenidos
  const steps = items
    .map((element, index) => {
      const contentKey = contents[index]
      const content = driverLocale?.driver.steps[contentKey]

      // Si no hay contenido para ese paso, lo ignoramos
      if (!content) return null

      return {
        element, // Elemento del DOM al que se asociará el paso
        popover: {
          title: content.title, // Título del popover
          description: content.description, // Descripción del popover
          popoverClass: 'driver-styles', // Clase CSS personalizada para el popover
        },
      }
    })
    .filter(Boolean) // Eliminamos pasos nulos

  // Creamos la instancia de driver.js con configuración y pasos
  const driverObj = driver({
    showProgress: true, // Muestra barra de progreso
    progressText: driverLocale?.driver.progressText, // Texto de progreso localizado
    nextBtnText: driverLocale?.driver.button_driver?.next, // Texto del botón "Siguiente"
    prevBtnText: driverLocale?.driver.button_driver?.previous, // Texto del botón "Anterior"
    doneBtnText: driverLocale?.driver.button_driver?.done, // Texto del botón "Hecho"
    onDestroyed: () => {
      // Cuando el tour se destruye, ejecutamos todos los callbacks
      onDestroyedCallback.forEach((callback) => callback())
    },
    steps: steps as DriveStep[], // Asignamos los pasos al tour
  })

  // Retornamos la instancia del driver
  return { driverObj }
}

Ejemplo de uso:

Documentacion del feature