React Migration in RadioButton Component

This section explains how to migrate the RadioButton component from EJ2 React to React. It provides a detailed comparison of APIs, including props, methods and events.

Properties

EJ2 React	React	Description
Props: `checked` `<RadioButtonComponent checked={true} />`	Props: `defaultChecked` `<RadioButton defaultChecked={true} />`	The `checked` prop in EJ2 React is replaced with the standard React `defaultChecked` prop in React.
Props: `cssClass` `<RadioButtonComponent cssClass="my-radio"/>`	Props: `className` `<RadioButton className="my-radio" />`	The `cssClass` prop in EJ2 React is replaced with the standard React `className` prop in React.
Props: `label` `<RadioButtonComponent label="JavaScript"/>`	Props: `label` `<RadioButton label='JavaScript'></RadioButton>`	The `label` prop is supported in both EJ2 React and React.
Props: `labelPosition` `<RadioButtonComponent label="JavaScript" labelPosition="Before"/>`	Props: `labelPlacement` `<RadioButton labelPlacement='Before' label='JavaScript'/>`	The `labelPosition` property in EJ2 becomes `labelPlacement` in React, while maintaining the same label functionality.
Props: `disabled` `<RadioButtonComponent disabled={true} name='disabled' label='Disabled'/>`	Props: `disabled` `<RadioButton disabled={true} name='disabled' label='Disabled'/>`	The `disabled` prop is supported in both EJ2 React and React.
Props: `e-small`, `e-large` `<RadioButtonComponent cssClass='e-small'> Small </RadioButtonComponent>`	Props: `size` `<RadioButton size={Size.Small} >Small</RadioButton>`	CSS class-based sizing in EJ2 React has been replaced with a type-safe `size` prop in React. Use the `Size` enum for button sizing, with mappings: `"e-small"` → `Size.Small`, `"e-large"` → `Size.Large`.
Props: `e-primary`, `e-success`, `e-info`, `e-warning`, `e-danger` `<RadioButtonComponent cssClass='e-warning' label='color' />`	Props: `color` `<RadioButton color={Color.Warning} label='color' > </RadioButton>`	CSS class-based coloring in EJ2 React has been replaced with a type-safe color prop in React. Use the Color enum to represent various colors like `Primary`, `Secondary`, `Warning`, `Success`, `Error`, and `Info`.

Events

EJ2 React	React	Description
Event: `onCheckedChange` `<RadioButtonComponent onCheckedChange={(e) => handleClose(e)}></RadioButtonComponent>`	Event: `onChange` `<RadioButton onChange={(e) => handleClose(e)}></RadioButton>`	The `onCheckedChange` event in EJ2 React is replaced with the `onChange` event in React, following React's standard event naming convention.
Events: `destroyed` `<RadioButtonComponent destroyed={() => console.log('destroyed')}></RadioButtonComponent>`	`useEffect(() => { return () => { console.log('destroyed'); }; }, []); <RadioButton onChange={(e) => handleClose(e)}></RadioButton>`	The `destroyed` callback event in EJ2 React is not available in React components. Instead, use the cleanup function returned by React `useEffect` hook to execute logic on component unmount.