add onStepChange callback

lib/Steps.js

@@ -11,6 +11,9 @@ export default class Steps extends React.Component {
 
     this._moveStep = this._moveStep.bind(this);
     this._printNav = this._printNav.bind(this);
+
+    // Call onStepChange for first time
+    this.props.onStepChange(this.state.currentStep);
   }
 
   render() {
@@ -97,19 +100,22 @@ export default class Steps extends React.Component {
       this.setState({
         currentStep: step
       });
+      this.props.onStepChange(step);
     }
   }
 }
 
 Steps.propTypes = {
   currentStep: React.PropTypes.number,
   stepShouldChange: React.PropTypes.func,
+  onStepChange: React.PropTypes.func,
   mountOnlySiblings: React.PropTypes.bool
 };
 
 Steps.defaultProps = {
   currentStep: 1,
   stepShouldChange: () => {return true;},
+  onStepChange: () => {},
   prevButton: 'Prev',
   nextButton: 'Next',
   mountOnlySiblings: false

lib/__tests__/Steps-test.js

@@ -277,4 +277,36 @@ describe('Steps',() => {
     expect(step5[0].textContent).toEqual('');
   });
 
+  it('should call onStepChange when render for first time', () => {
+    let futureStepNumber;
+    let onStepChangeCallback = (stepNumber) => {
+      futureStepNumber = stepNumber;
+    };
+
+    let myComponent = testRender(
+      <Steps onStepChange={onStepChangeCallback}>
+        <Step>Step 1</Step>
+        <Step>Step 2</Step>
+        <Step>Step 3</Step>
+      </Steps>)
+    expect(futureStepNumber).toEqual(1);
+  });
+
+  it('should call onStepChange callback after change of step', () => {
+    let futureStepNumber;
+    let onStepChangeCallback = (stepNumber) => {
+      futureStepNumber = stepNumber;
+    };
+
+    let myComponent = testRender(
+      <Steps onStepChange={onStepChangeCallback}>
+        <Step>Step 1</Step>
+        <Step>Step 2</Step>
+        <Step>Step 3</Step>
+      </Steps>)
+    let nextButton = TestUtils.scryRenderedDOMComponentsWithClass(myComponent, 'steps-nav-next');
+    TestUtils.Simulate.click(nextButton[0]);
+    expect(futureStepNumber).toEqual(2);
+  });
+
 });

readme.md

@@ -36,6 +36,9 @@ import { Steps, Step } from 'react-multistep-component';
    * `stepShouldChange` is called whenever a step is changed. This method can be used for
    * validations. By default will return `true`. *optional
    *
+   * `onStepChange` is called after step change (include the first time when render) and have
+   * the current step how attribute
+   *
    * `prevButton`/`nextButton` is a wrapper for the buttons, `html`, `jsx` or `string` can be included.
    * ex: `prevButton={<span><img src="..."/>Step 1</span>}`. *optional
    *