Mk-guide NPM | npm.io

A light JavaScript library to guide the user to focus the important part, including fix element.
There is Demo with default value

Install

npm install mk-guide
or npm i mk-guide
or yarn add mk-guide

Usage

Import

Import the library and the CSS file

import MkGuide from 'mk-guide'
import 'mk-guide/style.css'

Or for css file

//index.html
<link type="text/css" rel="stylesheet" href="node_modules/mk-guide/style.css">

Creat a variable of guide

Input a new variable mask

// New a maskclass with default value
let mask = new MkGuide()

Or you could customize it with color:

// Customize it
let mask = new MkGuide({ 
    buttonColor: "gold", // optional   
    skipButtonColor: "firebrick", // optional
    mouseHover: "true", // optional  default:false
    mode: "dark", // default: light
    isFocus: false, // default: true
    isKeyboard: true
})

Initialize the route and get started

Set the route of guide, and call the mask.start().

// example with 3 step, and it will focus the element of step2
mask.guides = [
    {   
        element: "#step1",                // querySelector
        imgURL: 'https://xxxx/xxx.com',
        header: 'Welcome',
        description: "this is step 1"    // the words of tip
    },
    {   
        element: ".step2",
        description: "Tap in here, and focus it (shouldFocus: true)"
    },
    {
        element: "box3",
        description: "You can control it with'→ ← ESC'"
    },
]

mask.start() // start the mask guide

Or you can use intro.

// Must use intro for the first guide item
mask.guides = [
    {   
        intro: true, // ONLY can be used for the first item! And no element   
        imgURL: 'https://xxxx/xxx.com',
        header: 'Welcome',
        description: "this is step 1" 
        // And do not use 'element' and 'shouldFocus' for intro item
    },
    {   
        element: ".step2",
        description: "Tap in here, and focus it (shouldFocus: true)"
    },
    {
        element: "box3",
        description: "You can control it with'→ ← ESC'"
    },
]