Events in React Stepper component

8 Jan 202418 minutes to read

This section describes the Stepper events that will be triggered when an appropriate actions are performed. The following events are available in the Stepper component.

created

The Stepper component triggers the created event when the control rendering is completed.

import * as React from "react";
import * as ReactDom from "react-dom";
import { StepperComponent, StepsDirective, StepDirective } from '@syncfusion/ej2-react-navigations';

function App() {
    return (
        <div className="stepper-created">
            <StepperComponent created={() => { /* Your required action here */ } }>
                <StepsDirective>
                    <StepDirective/>
                    <StepDirective/>
                    <StepDirective/>
                    <StepDirective/>
                </StepsDirective>
            </StepperComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
import * as React from "react";
import * as ReactDom from "react-dom";
import { StepperComponent, StepsDirective, StepDirective } from '@syncfusion/ej2-react-navigations';

function App() {
    return (
        <div className="stepper-created">
            <StepperComponent created={() => { /* Your required action here */ } }>
                <StepsDirective>
                    <StepDirective/>
                    <StepDirective/>
                    <StepDirective/>
                    <StepDirective/>
                </StepsDirective>
            </StepperComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
/* Represents the styles for loader */
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.stepper-created {
  margin-top: 30px;
  padding: 30px;
}

stepChanged

The Stepper component triggers the stepChanged event after the active step is changed.

import * as React from "react";
import * as ReactDom from "react-dom";
import { StepperComponent, StepsDirective, StepDirective } from '@syncfusion/ej2-react-navigations';

function App() {
    return (
        <div className="stepper-step-changed">
            <StepperComponent stepChanged={(args) => { alert("Step Changed from "+args.previousStep + " to " + args.activeStep) } }>
                <StepsDirective>
                    <StepDirective/>
                    <StepDirective/>
                    <StepDirective/>
                    <StepDirective/>
                </StepsDirective>
            </StepperComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
import * as React from "react";
import * as ReactDom from "react-dom";
import { StepperComponent, StepsDirective, StepDirective, StepperChangedEventArgs } from '@syncfusion/ej2-react-navigations';

function App() {
    return (
        <div className="stepper-step-changed">
            <StepperComponent stepChanged={(args: StepperChangedEventArgs) => { alert("Step Changed from " + args.previousStep + " to " + args.activeStep) }}>
                <StepsDirective>
                    <StepDirective />
                    <StepDirective />
                    <StepDirective />
                    <StepDirective />
                </StepsDirective>
            </StepperComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
/* Represents the styles for loader */
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.stepper-step-changed {
  margin-top: 30px;
  padding: 30px;
}

stepChanging

The Stepper component triggers the stepChanging event before the active step change.

import * as React from "react";
import * as ReactDom from "react-dom";
import { StepperComponent, StepsDirective, StepDirective } from '@syncfusion/ej2-react-navigations';

function App() {
    return (
        <div className="stepper-step-changing">
            <StepperComponent stepChanging={(args) => { alert("Step Changing from "+args.previousStep + " to " + args.activeStep) } }>
                <StepsDirective>
                    <StepDirective/>
                    <StepDirective/>
                    <StepDirective/>
                    <StepDirective/>
                </StepsDirective>
            </StepperComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
import * as React from "react";
import * as ReactDom from "react-dom";
import { StepperComponent, StepsDirective, StepDirective, StepperChangingEventArgs } from '@syncfusion/ej2-react-navigations';

function App() {
    return (
        <div className="stepper-step-changing">
            <StepperComponent stepChanging={(args: StepperChangingEventArgs) => { alert("Step Changing from "+args.previousStep + " to " + args.activeStep) } }>
                <StepsDirective>
                    <StepDirective/>
                    <StepDirective/>
                    <StepDirective/>
                    <StepDirective/>
                </StepsDirective>
            </StepperComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
/* Represents the styles for loader */
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.stepper-step-changing {
  margin-top: 30px;
  padding: 30px;
}

stepClick

The Stepper component triggers the stepClick event when the step is clicked.

import * as React from "react";
import * as ReactDom from "react-dom";
import { StepperComponent, StepsDirective, StepDirective } from '@syncfusion/ej2-react-navigations';

function App() {
    return (
        <div className="stepper-step-click">
            <StepperComponent stepClick={(args) => { /* Your required action here */ }}>
                <StepsDirective>
                    <StepDirective/>
                    <StepDirective/>
                    <StepDirective/>
                    <StepDirective/>
                </StepsDirective>
            </StepperComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
import * as React from "react";
import * as ReactDom from "react-dom";
import { StepperComponent, StepsDirective, StepDirective, StepperClickEventArgs } from '@syncfusion/ej2-react-navigations';

function App() {
    return (
        <div className="stepper-step-click">
            <StepperComponent stepClick={(args: StepperClickEventArgs) => { /* Your required action here */ }}>
                <StepsDirective>
                    <StepDirective/>
                    <StepDirective/>
                    <StepDirective/>
                    <StepDirective/>
                </StepsDirective>
            </StepperComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
/* Represents the styles for loader */
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.stepper-step-click {
  margin-top: 30px;
  padding: 30px;
}

beforeStepRender

The Stepper component triggers the beforeStepRender event before rendering each step.

import * as React from "react";
import * as ReactDom from "react-dom";
import { StepperComponent, StepsDirective, StepDirective } from '@syncfusion/ej2-react-navigations';

function App() {
    return (
        <div className="stepper-before-render">
            <StepperComponent beforeStepRender={(args) => { /* Your required action here */ }}>
                <StepsDirective>
                    <StepDirective/>
                    <StepDirective/>
                    <StepDirective/>
                    <StepDirective/>
                </StepsDirective>
            </StepperComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
import * as React from "react";
import * as ReactDom from "react-dom";
import { StepperComponent, StepsDirective, StepDirective, StepperRenderingEventArgs } from '@syncfusion/ej2-react-navigations';

function App() {
    return (
        <div className="stepper-before-render">
            <StepperComponent beforeStepRender={(args: StepperRenderingEventArgs) => { /* Your required action here */ }}>
                <StepsDirective>
                    <StepDirective/>
                    <StepDirective/>
                    <StepDirective/>
                    <StepDirective/>
                </StepsDirective>
            </StepperComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));
/* Represents the styles for loader */
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.stepper-before-render {
  margin-top: 30px;
  padding: 30px;
}