Change switch state using toggle method in React Switch component

30 Jan 20232 minutes to read

This section explains about how to toggle between the switch states using toggle method.

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);
// To render Switch with checked state.
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);

// To render Switch with checked state.
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.