@jsh1400/help.js

Tour / Help

• Installation
• Usage
• KeyDown Tools
• Props
• Demo
• License
• Author

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 id="iTest_7">iTest_7</div>
			    <div id="iTest_37">iTest_37</div>
			    <div id="iTest_57">iTest_57</div>
			    
			</div>)
	}
}

KeyDown

Escape == OnSkip event
ArrowRight == OnNext event
ArrowLeft == OnPrev event

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
style	object	{}

Demo

help.js online Demo

License

MIT

Author

Javad Shariati [e-mail]