• 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'"
    },
]

update history

v1.12

Added: IsKeyboard is supported, which can be used to control keyboard.

v1.11

Added: Implemented the function of highlighting the fixed element and refreshing when scrolling.

v1.10

Debug: Fixed the bug of display about the bottom item

v1.9

Added: Dark mode and light mode

Debug: Clear the display bug

v1.8

Added: header, picture, intro, and resize refresh

v1.7

Optimized code structure

v1.4

Debug: Clear the display bug

v1.3

Debug: Clear the keypress && Beyond the margin

v1.1.0

Added customized color API and shouldFocus API

v1.0.2

Added the arrow into the button

v1.0.1

Changed the color of tip