@jsh1400/help.js NPM

Tour / Help

help.js

This Component is Tour (step by step) for help to learning ... :)

Installation

npm i @jsh1400/help.js

Usage

import React from 'react'
import JHelp from '@jsh1400/help.js'

export default class App extends React.Component {
	state = {play: false}
	render() {
		const helpList= [
		  {
		    selector: '#iTest_7',
		    title: 'help test 7',
		    description: 'help test 7'
		  },
		  {
		    selector: '#iTest_37',
		    description: 'help test 37',
		    position: 'bottom'
		  },
		  {
		    selector: '#iTest_57',
		    description: 'help test 57'
		  }
		]
		return(<div>
			<button onClick={()=> this.setState({play: !this.state.play})}>HELP</button>
			  <JHelp
				    play={this.state.play}
				    helpList={helpList}
				    onSkip={()=>this.setState({play: false})}
				    onClose={()=>this.setState({play: false})}
			    />
			</div>)
	}
}

Props

props	type	default
* play	boolean	false
* helpList	array{ selector: string, img: string, title: string, description: string, position: string }	[]
startStep	number	0
endStep	number	0
nextLabel	string	'next'
prevLabel	string	'prev'
skipLabel	string	'skip'
closeLabel	string	'close'
direction	string	'ltr'
onPrev	function	() => { step: string }
onNext	function	() => { step: string }
onSkip	function	() => { step: string }
onClose	function	() => { step: string }
prevClassName	string	undefined
nextClassName	string	undefined
skipClassName	string	undefined
closeClassName	string	undefined
breakStep	boolean	false
padding	number	0
style	object	{}