Change switch state using toggle method in React Switch component

2 Mar 20262 minutes to read

Programmatically switch between on and off states using the toggle method. This approach enables external controls to change Switch state without direct user interaction, supporting workflows like keyboard shortcuts, remote commands, or state synchronization with external data.

app.jsx

import { enableRipple } from '@syncfusion/ej2-base';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);

function App() {
    let switchRef;
    function created() {
        switchRef.toggle();
    }
    return (<SwitchComponent id="switch" ref={(scope) => { switchRef = scope; }} enableRtl={true} checked={true} created={created} />);
}
export default App;
ReactDom.render(<App />, document.getElementById('switch'));

app.tsx

import { enableRipple } from '@syncfusion/ej2-base';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);

function App() {
  let switchRef: SwitchComponent;
  function created(): void {
    switchRef.toggle();
  }
  return (
    <SwitchComponent id="switch" ref={(scope) => { switchRef = scope as SwitchComponent; }} enableRtl={true} checked={true} created={created} />
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('switch'));

Switch triggers change event on every state stage to perform custom operations.