The react bootstrap component is a great way to prompt users when they first visit a site. Demo address
rendering
Guide component implementation
We can design
class Guide extends Component {
render () {
return (
<div className="guide-container" ref={e= > this.guide = e}>
{this.props.children}
</div>)}}Copy the code
How do I get which DOM to boot? This can be obtained through the dom’s custom properties, and then through querySelectorAll
// example <Guide > <header data-step="1" data-tip='Welcome to use react-guide'>React Guide</header> </Guide> // Access to boot the dom this. Guide. QuerySelectorAll (' [data - step])Copy the code
The
The mask layer
Mask layer through fixed layout, add a transparency is good, through the visible control display from the outside
class Guide extends Component {
render () {
return (
<div className="guide-container" ref={e= > this.guide = e}>
{this.props.children}
{this.props.visible&&<div className="guide-shadow" ref={e= > this.shadow = e}s.onClickShadow.bind(this)} key='guide-shadow'></div>}
</div>)}}Copy the code
Prompt box
The prompt box should be above the mask layer, its Z-index is greater than that of the mask layer. The prompt box should also consider the free space of the page and determine the placement position. For the four positions in the picture below, 1 and 4 are not fit enough, so 2 and 3 can be placed.
Add a resize event listener to rearrange the page when it is scaled
window.addEventListener('resize'.this.onRezieWindow.bind(this), false)
Copy the code
Content area
First determine the location of the content area to display, by the target DOM offsertLeft, offsetTop, height, width, to obtain the location of the content area
const nodeList = getListFromLike(this.guide.querySelectorAll('[data-step]')) // Get all the dom to boot
nodeList.sort((a, b) = > {
return Number(a.getAttribute('data-step')) -Number(b.getAttribute('data-step'))})// Sort by the size of step
let dots = nodeList.map(node= > {
let height = node.clientHeight || node.offsetHeight
let width = node.clientWidth || node.offsetWidth
return {
left: node.offsetLeft,
top: node.offsetTop,
height,
width,
tip: node.getAttribute('data-tip'),
step: node.getAttribute('data-step'),
fRight: node.offsetLeft + width,
fBottom: node.offsetTop + height
}
})
Copy the code
The content area is also above the mask layer. To activate content, simply add a Z-index to the original DOM
node.style.setProperty('position'.'relative');
node.style.setProperty('z-index'.'999996'.'important');
Copy the code
When there is a scroll bar on the page, the page should be scrollTo(x, y)
window.scrollTo(dLeft - 100, dTop - 100)
Copy the code
The voice function
The voice function can use the AUDIO tag of HTML5
<audio ref={e= > this.audio = e} src={this.state.audioUrl} type="audio/mpeg"></audio>}
Copy the code
Combined with Baidu’S TTS API
function text2Voice(tip, lan){
let obj = {
lan,
ie: 'UTF-8'.spd: '4'.per: 4.text: tip // tip is the data-tip attribute on the DOM
}
return 'http://tts.baidu.com/text2audio' + axiosObj(obj)
}
Copy the code
Point the SRC of the audio tag to the result of text2Voice(tip, LAN)
Stop and play through audio’s API
this.audio.autoplay = true // Auto play
this.audio.pause() / / pause
this.audio.addEventListener('timeupdate', () => {...// When will the monitoring end
}, false)
Copy the code
instructions
Source code and API ➡️github, welcome star, thank you.
The installation
It can be installed through NPM
$ npm install react-guide
Copy the code
API
Here is the react-Guide API
Property | Description | Type | Default |
---|---|---|---|
visible | Whether the guide is visible or not | boolean | false |
audio | Whether a voice reads of tip of the guide or not | boolean | true |
lan | The voice of language, ‘en’ or ‘zh’ | string | en |
bullet | Whether bullets (.) button is visible on middle of the guide or not | boolean | false |
num | Whether num icon is visible on top left of the guide or not | boolean | false |
onCancel | Specify a function that will be called when a user clicks shadow, skip button on bottom left | function(e) | – |
onOk | Specify a function that will be called when all steps have done and click the done button | function(e) | – |
data-step | Number of steps for guides, only use in dom | string | – |
data-tip | Every step you want to show tip, only use in dom | string | – |
example
A case in point
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Guide from 'react-guide'
class App extends Component {
constructor () {
super(a)this.state = {
visible: false
}
}
handleStart() {
this.setState({
visible: true
})
}
handleCancel() {
this.setState({
visible: false
})
}
render() {
return (
<div>
<Guide
visible={this.state.visible}
onCancel={this.handleCancel.bind(this)} >
<h1 data-step="1" data-tip='Hello World'>Step1</h1>
<div data-step="3" data-tip='Welcome to use react-guide'>Step3</div>
<h4 data-step="2" data-tip='react-guide is very easy' >Step2</h4>
<div><span data-step="4" data-tip='Let start'>Step4</span></div>
</Guide>
<button onClick={this.handleStart.bind(this)}>start</button>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
Copy the code