rc-wizard@0.0.9

React wizard

// use jsx to render html, do not modify simple.html

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Wizard from 'rc-wizard';
require('rc-wizard/assets/index.css');

class Test extends Component {

  constructor(props) {
    super(props);
    this.state = {
      displayKey: '2',
    };
  }

  gotoFirstPage() {
    this.setState({
      displayKey: '1',
    });
  }

  render() {
    return (
      <div>
        <button onClick={() => { this.gotoFirstPage(); }}>
          Go to first page
        </button>
        <Wizard
          id="selected-step-test"
          onDone={() => { alert('Wizard is done'); }}
          displayKey={this.state.displayKey}
        >
          <Wizard.Step key="1">
            I'm the first page.
          </Wizard.Step>
          <Wizard.Step key="2">
            I'm the default displaying second page.
          </Wizard.Step>
          <Wizard.Step key="3">
            I'm the third page.
          </Wizard.Step>
        </Wizard>
      </div>
    );
  }
}

ReactDOM.render(<Test />, document.getElementById('__react-content'));
Fork me on GitHub