User Guider

Take your users to a tour in your app.

Install

npm install user-guider

Usage

import { guide } from 'user-guider';
// rest of your code
const config = {
    elements: [{
            title: 'user-guider'
            text: 'This is my guide'
        },
        {
            name: '#my-awesome-div',
            text: 'This is my awesome div'
        }
    ],
    options: {
        animation: 'slide',
        colors: {
            background: '#43ff3d',
            text: '#00ef22'
        }
    }
}
guide(config)

you nedd to include styles/ug.css to your global style.

If you want to disable the user's clicks in the app during the tour.you can use the lockApp & unlockApp functions

Config

The config is an object, with the following properties

elements

• require: true

elements is an array of objects with the following properties:

| property | require | type | description | |:--------:|:-------:|:------:|---------------------------------------------------------------------------------------------------------------------------------| | text | true | string | the description on this element | | | element | false | string |Array<string> | a css selector of the dom we want the guide window will be near to. if not provide the guide window will place in the center. | | title | false | string | the title for this stepif provide use in the navigator container for this step instead of the step index | | position | false | 'center' | 'element' | the position of the guider, default to element. | | beforeGuide| false| function| a function that be called before this step will be run.| | afterGuide| false | function | a function that be called after this step in done, called with the current dom element if exist |

options

• require: false

options is an object with the following properties:

| property | type | description | |:------------: |:-------: |------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | rtl | boolean | render this guide as rtl.default false. | | buttonsTitle | object | define the navigation button text:{next: string, default 'Next'back: string, default 'Back'done: string, default 'Done'skip: string, default 'Skip'} | | buttonsTheme | string | define the style of the navigation buttons possible values: 'round', 'solid' default 'round'. | | colors | object | change the color of the container:{background: css-color, default '#000000aa'text: css-color, default '#f9f9f9'elementBorder: css-color, default 'transparent'} | | animation | object | define the animation on step navigation, {type: possible values 'fade', 'slide', 'none';duration: number, default 250}if type is 'none' duration is 0 | | font | string | define the font family for the guider |

onUserGuiderEnd

• require: false

a function that will be called when the guider is hide from the screen. the function will be called with an event argument according to why the guider is hide.

• 'close' - if the user click the close button
• 'skip' - if the user click the skip button
• 'done' - if the use click the done button