React Switch - Getting Started
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:
- 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.
- // ...
- 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.
- // ...
- 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.
- 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:
- 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;
If you have technical questions, please create a support ticket in the DevExpress Support Center.