user-guider

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 step if 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