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
as a container component because we don’t know what we want to bootstrap. Render the contents through the this.props. Children of the container component

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
component also needs to have four parts: mask layer, prompt box, content area, voice function.

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