Enable rtl in React Switch component

7 Aug 20231 minute to read

Switch component has RTL support. This can be achieved by setting enableRtl as true.

The following example illustrates how to enable right-to-left support in Switch component.

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() {
    return (<SwitchComponent enableRtl={true} checked={true}/>);
}
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() {
  return (
    <SwitchComponent enableRtl={true} checked={true} />
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('switch'));