Ducktour Svelte

A lightweight and dependancy-free way to create highly-customizable product tours and walkthroughs, built from the ground up in Svelte.

Install

npm install ducktour --save-dev

Usage

<script>
  import { onMount } from "svelte"
    import { Ducktour } from 'ducktour'

  let showTour = false
    
  const steps = [
    {
      title: 'Step 1',
      text: 'Install Ducktour with npm',
      id: 'step-1'
      buttonText: 'Next'
    },
    {
      title: 'Step 2',
      text: 'Create an array of steps with IDs',
      id: 'step-2'
      buttonText: 'Got it!'
    },
    {
      title: 'Step 3',
      text: 'Pass the steps to the Ducktour component',
      id: 'step-3'
      buttonText: 'Finish'
    }
  ]

  const handleClose = () => {
    showTour = false
  }

  onMount(() => {
    showTour = true
  })
</script>

<Ducktour
  steps={steps}
  close={handleClose}
/>

Props

Appearance

An optional object used to customize the appearance of Ducktour.

Appearance Defaults

{
  highlightPaddingX: 12,
  highlightPaddingY: 12,
  highlightRadius: 12,
  overlayOpacity: .7,
  overlayFill: "#000",
  infoBox: {
    backgroundColor: "#fff",
    padding: 16,
    maxWidth: 200,
    minWidth: 360
  }
}

Behavior

An optional object used to customize the appearance of Ducktour.

Behavior Defaults

{
  highlightPaddingX: 12,
  highlightPaddingY: 12,
  highlightRadius: 12,
  overlayOpacity: .7,
  overlayFill: "#000",
  infoBox: {
    backgroundColor: "#fff",
    padding: 16,
    maxWidth: 200,
    minWidth: 360
  }
}

Custom Components

Ducktour provides a basic customizable look for the walkthrough out of the box. You're able to apply classes to the wrapper, title, text, colors, and buttons. But if you'd like to pass in your own component, Ducktour supports that too. We've all worked with designers and companies who need everything to stay as on brand as possible.

Ducktour will always pass the following props to your component:

You can also optionally define a custom props object that will also get passed to your custom component.

Usage

  <script>
    import YourSpecialInfoBoxComponent from './somewhere'
    import YourBottomComponent from './somewhere-else'
  </script>

  <Ducktour
    ...
    customComponents={
      {
        infoBox: {
          component: YourSpecialInfoBoxComponent,
          props: {
            foo: "fighters", 
            bar: "ista"
          }
        },
        bottom: {
          component: YourBottomComponent
        }
      }
    }
  >

Publishing

Go into the package.json and give your package the desired name through the "name" option. Also consider adding a "license" field and point it to a LICENSE file which you can create from a template (one popular option is the MIT license).

To publish your library to npm:

npm publish