User-guider NPM

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.