react-guide

A reactjs component is used for web page guidance

Table of Contents

• Installation
• API documentation
• Examples
• demo

Installation

To install, you can use npm

$ npm install react-guide

API documentation

| 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 | - |

Examples

Here is a simple example of react-guide being used in an app

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Guide from 'react-guide'
class App extends Component {
  constructor () {
    super()
    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'));

You can find more examples in the examples directory, which you can run in a local development server using npm start.

demo

This is a demo show guide demo