react-tools-guide v0.1.7

react-guide

Usage

import ReactDOM from "react-dom"
import { GuideRoot, Guide } from "react-guide"

ReactDOM.render(
  <GuideRoot>
    <Guide num={0} content={"XXXX"}>
      <Component1 />
    </Guide>
    <Guide num={1} content={<div>XXXX</div>}>
      <Component1 />
    </Guide>
    <Guide num={2} content={<div>YYYY</div>}>
      <Component1 />
    </Guide>
    <Guide num={3} content={<div>YYYY</div>}>
      <Component1 />
    </Guide>
  </GuideRoot>
)

提供两个组件来实现页面导航的功能

• GuideRoot

  例子

  import { GuideRoot } from "react-tools-guide"
  
  class App extends React.Component {
    state = {
      open: false,
    }
  
    before = () => {
      // do something before start
    }
  
    after = () => {
      // do something after end
    }
  
    render() {
      return (
        <GuideRoot
          open={this.state.open}
          beforeProcess={this.before}
          afterProcess={this.after}
        />
      )
    }
  }

• Guide

  例子

  import { Guide } from "react-tools-guide"
  
  class ComponentNeedGuide extends React.Component {
    render() {
      /**
       * @param num 序号，以数字表示
       * @param plasement 方位。top, left, bottom, top
       * @param root 相对父级的类名。屏幕滚动的基准。
       */
      return <Guide num={0} placement="left" root=".aaa" />
    }
  }