react-stepper-horizontal - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

example/example.js

 'use strict';
 
-import React from 'react';
+import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import Stepper from '../src/index.js';
 
-let App = React.createClass({
+class App extends Component {
+  constructor() {
+    super();
+    this.state = {
+      steps: ['Step One', 'Step Two', 'Step Three', 'Step Four'],
+      currentStep: 0,
+    };
+    this.onClickNext = this.onClickNext.bind(this);
+  }
+
+  onClickNext() {
+    const { steps, currentStep } = this.state;
+    this.setState({
+      steps: steps.map((s, i) => (i == currentStep ? `${s} Completed` : s)),
+      currentStep: currentStep + 1,
+    });
+  }
+
   render() {
-    const steps = ['Step One', 'Step Two', 'Step Three', 'Step Four'];
+    const { steps, currentStep } = this.state;
+    const buttonStyle = { background: '#E0E0E0', width: 200, padding: 16, textAlign: 'center', margin: '0 auto', marginTop: 32 };
+
     return (
-      <div style={ { height: 200, width: 600 } }>
-        <Stepper steps={ steps } activeStep={ 1 } />
+      <div>
+        <Stepper steps={ steps } activeStep={ currentStep } />
+        <div style={ buttonStyle } onClick={ this.onClickNext }>Next</div>
       </div>
     );
   }
-});
+};
 
 ReactDOM.render(<App />, document.getElementById('content'));

package.json

 {
   "name": "react-stepper-horizontal",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Well-designed stepper component for react",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -14,2 +14,12 @@ # react-stepper
 ## Usage
+```
+render() {
+  return (
+    <div>
+      <Stepper steps={ ['Step One', 'Step Two', 'Step Three', 'Step Four'] } activeStep={ 1 } />
+    </div>
+  );
+}
+```
+See full example [here](https://github.com/mu29/react-stepper/blob/master/example/example.js)
 
@@ -16,0 +26,0 @@ ## API

No alert changes

Improved metrics

Total package byte prevSize

81874

increased by1.02%

Lines of code

274

increased by6.61%

Number of lines in readme file

51

increased by24.39%

No dependency changes