guide-svg/README.md

Beginner's Guide

## Installation

#### With NPM

```sh
npm install guide-svg
```

## Usage

Import the Guide using TypeScript and ES6 module:

```jsx
import Guide from "guide-svg";
```

CDN

```jsx
<script src='https://cdn.jsdelivr.net/npm/guide-svg@1.1.3/dist/guide.iife.js'></script>
```

Now instantiate the client to make a call to one of the APIs.

```jsx
async function startGuide() {
    const guide = new Guide({
        // Two display styles: "normal" or "immersive"
        // model: "immersive",

        // Whether to show the border around the highlighted element
        // hasBorder: true,

        // Padding inside the highlighted box
        // padding: 20,

        // Animation duration in milliseconds
        // duration: 100,

        // Distance between the tooltip and the highlighted element
        // margin: 30,

        // Mask (overlay) opacity
        // opacity: 0.9,

        // Text for the "Next" button
        // nextBtnText: "Next",

        // Text for the "Previous" button
        // prevBtnText: "Previous",

        // Text for the "Finish" button
        // doneBtnText: "Finish",

        steps: [
            {
                intro: "Welcome to the tutorial: Set up your avatar",
            },
            {
                // Things to do before jumping to this step
                // onBeforeChange: async () => {
                //     await something();
                // },

                // Whether the highlight box allows clicks to pass through to the underlying element
                // isPenetrable: false,

                intro: "Enter something here",
                element: document.querySelector("#steps-1-1"),
            },
        ],
    });
    guide.start();
}
startGuide();
```

Functions

```jsx
// Start the guide
guide.start();

// Start the guide from a specific step
guide.start(3);

// Jump to a specific step
guide.moveStep(3);

// Go to the next step
guide.nextStep();

// Go to the previous step
guide.prevStep();

// Stop the guide
guide.stop();
```