This section explains how to migrate the Switch component from EJ2 React to React. This guide provides a detailed comparison of APIs, including props and events.
The Switch component is a binary toggle control for settings and standalone options. Both EJ2 React and React versions provide similar functionality but with simplified and more composable APIs in the new React component.
| EJ2 React | React | Description |
|---|
Props: checked <SwitchComponent
checked={true}
/> | Props: checked or defaultChecked // Controlled
<Switch checked={true} onChange={handleChange} />
// Uncontrolled
<Switch defaultChecked={true} /> | The checked prop in EJ2 React is replaced with checked for controlled components or defaultChecked for uncontrolled components in React. |
Props: cssClass <SwitchComponent
cssClass="custom-switch"/> | Props: className <Switch className="custom-switch" /> | The cssClass prop in EJ2 React is replaced with the standard React className prop in React. |
Props: disabled <SwitchComponent disabled={true} /> | Props: disabled <Switch disabled={true} /> | The disabled prop is supported in both EJ2 React and React. Prevents the user from toggling the switch. |
Props: onLabel <SwitchComponent
onLabel="ON"
/> | Props: onTrackLabel <Switch onTrackLabel="ON" /> | The onLabel prop in EJ2 React is renamed to onTrackLabel in React. Specifies the label displayed when the switch is in the ON state. |
Props: offLabel <SwitchComponent
offLabel="OFF"
/> | Props: offTrackLabel <Switch offTrackLabel="OFF" /> | The offLabel prop in EJ2 React is renamed to offTrackLabel in React. Specifies the label displayed when the switch is in the OFF state. |
Props: value <SwitchComponent
value="enabled"
/> | Props: value <Switch value="enabled" /> | The value prop is supported in both EJ2 React and React. Specifies the HTML form value submitted when the switch is checked. |
Props: enableRtl <SwitchComponent
enableRtl={true}
/> | Props: Use Provider with dir attribute <Provider dir="rtl">
<Switch checked={true} label="Dark mode" />
</Provider> | The enableRtl prop in EJ2 React is handled by wrapping the component with a Provider and setting the dir attribute to "rtl" in React. |
| EJ2 React | React | Description |
|---|
Events: change <SwitchComponent
change={(args) => {
console.log('Switch changed:', args.checked);
}}
/> | Events: onChange <Switch
onChange={(event) => {
console.log('Switch changed:', event.value);
}}
/> | The change event in EJ2 React is renamed to onChange in React. Fires when the user toggles the switch. |
Events: beforeChange <SwitchComponent
beforeChange={(args) => {
console.log('Before change');
}}
/> | Not available in React directly. Handle via onChange event or component state. <Switch
onChange={(event) => {
// Perform pre-change logic here
console.log('Toggle triggered');
}}
/> | The beforeChange event in EJ2 React is not directly available in React. Use the onChange event instead for similar functionality. |
Events: created <SwitchComponent
created={() => {
console.log('Component created');
}}
/> | Not available in React. Use React Hooks instead. useEffect(() => {
console.log('Component mounted');
}, []);
<Switch defaultChecked={true} /> | The created event in EJ2 React is not available in React. Use the React useEffect hook with an empty dependency array to run logic on component mount. |