React Switch - Getting Started

NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.

The Switch component allows users to switch between ON (the value is true) and OFF (the value is false) states.

This tutorial shows how to add Switch to a page and configure its core features. The following sample shows the customization result:

Each section in this tutorial describes a single configuration step. You can also find the full source code in the following GitHub repository: getting-started-with-switch.

Create a Switch

Add DevExtreme to your React application and use the following code to create a Switch component:

App.js
  • import React from "react";
  • import "devextreme/dist/css/dx.light.css";
  • import { Switch } from "devextreme-react/switch";
  •  
  • function App() {
  • return (
  • <Switch>
  • </Switch>
  • );
  • }
  •  
  • export default App;

Specify the Initial State

If you need to specify the initial state, assign a Boolean value to the value property. You can also change the Switch component labels. Use the switchedOnText and the switchedOffText properties.

App.js
  • // ...
  •  
  • function App() {
  • // ...
  • return (
  • <Switch
  • value={false}
  • />
  • );
  • }
  •  
  • export default App;

Configure Size

The component allows you to change its width.

You can also use rtlEnabled property to enable the Right-to-Left layout.

App.js
  • // ...
  •  
  • function App() {
  • // ...
  • return (
  • <Switch ...
  • width={80}
  • rtlEnabled={true}
  • />
  • );
  • }
  •  
  • export default App;

Define a Hint

The following code specifies the hint that appears when users hover the mouse pointer over the Switch.

App.js
  • import React, { useState, useCallback } from "react";
  • import "devextreme/dist/css/dx.light.css";
  •  
  • import { Switch } from "devextreme-react/switch";
  •  
  • function App() {
  • const [hintMessage, setHintMessage] = useState("Click to switch on");
  •  
  • const onValueChanged = useCallback((e) => {
  • const messageText = e.value ? "Click to switch off" : "Click to switch on";
  • setHintMessage(messageText);
  • // ...
  • }, []);
  •  
  • return (
  • <Switch ...
  • hint={hintMessage}
  • onValueChanged={onValueChanged}
  • />
  • );
  • }
  •  
  • export default App;

Handle Value Change

Users can change a component value (state) with a mouse click, SPACE key, or tap. Implement the onValueChanged callback to handle value changes.

The following code displays a notification every time users change the Switch state:

App.js
  • import React, { useState, useCallback } from "react";
  • import "devextreme/dist/css/dx.light.css";
  •  
  • import { Switch } from "devextreme-react/switch";
  • import notify from "devextreme/ui/notify";
  •  
  • function App() {
  • // ...
  • const onValueChanged = useCallback((e) => {
  • // ...
  • const stateLabel = e.value ? "ON" : "OFF";
  • notify(`The component is switched ${stateLabel}`);
  • }, []);
  •  
  • return (
  • <Switch ...
  • onValueChanged={onValueChanged}
  • />
  • );
  • }
  •  
  • export default App;