web-guide-th

a user-friendly npm library designed to enhance website introductions. With WebGuide, developers can effortlessly create interactive sequences that highlight specific elements of their web systems, accompanied by informative descriptions. Users can navigate through the guided tour with ease using next and previous buttons, making it an ideal tool for onboarding new visitors or showcasing key features of your website.

Install

npm install --save web-guide-th

Usage

import React, { Component } from 'react'

import WebGuide from 'web-guide-th'

class Example extends Component {
  data = [
    {
      id: 'com_1',
      title: 'title 1',
      description: 'com_1',
      position: 'bottom'
    },
    {
      id: 'com_2',
      title: 'title 2',
      description: 'com_2',
      position: 'left start'
    }
  ]
  render() {
    return <WebGuide active={true} data={data} />
  }
}

Data guide

const data = [
  {
    id: component id,
    title: title show on top left of guide dialog,
    description: main component description,
    position: position of guide dialog
      * position options:
          - top
          - top start
          - top end
          - left
          - left start
          - left end
          - bottom [default]
          - bottom start
          - bottom end
          - right
          - right start
          - right end
  }
]

Parameters

Parameter	Type	Description
active	boolean	Enable/disable guide
data	array	List of guides
step	number	State to control step
defaultStep	number	Initial step on load
GuideDialogProps	object	Props for customizing the guide dialog
- gap	pixel value	Space between focus area and guide dialog
- padding	pixel value	Space around focus area
- isSmooth	boolean	Smooth moving between steps
- background	string	Hex or RGB color code for background
- styleInner	object	CSS style of inner area
- styleOuter	object	CSS style of outer area
customGuideDialog	component function	Function for rendering a custom guide dialog
onCompleteGuide	callback function	Callback fired when reaching the end of the guide

Parameters Usage Examples

• customGuideDialog: when using customGuideDialog, entire built in guide dialog will be replaced including title, close button, description, moving forward and backward buttons.

<WebGuide
  ...
  customGuideDialog={(current_step_data) => {
    return current_step_data.description
  }}
/>

License

MIT © KevinHa59