This section explains how to migrate the CheckBox component from EJ2 React to React. It provides a detailed comparison of APIs, including props, methods and events.
| EJ2 React | React | Description |
|---|
Props: checked <CheckBoxComponent
checked={true}
/> | Props: defaultChecked <Checkbox
defaultChecked={true}
/> | The checked prop in EJ2 React is replaced with the standard React defaultChecked prop in React. |
Props: cssClass <CheckBoxComponent
cssClass="my-checkbox"
/> | Props: className <Checkbox
className="my-checkbox"
/> | The cssClass prop in EJ2 React is replaced with the standard React className prop in React. |
Props: indeterminate <CheckBoxComponent label="Inputs"
indeterminate={true}></CheckBoxComponent> | Props: indeterminate <Checkbox label="Inputs" indeterminate={true} /> | The indeterminate prop is supported in both EJ2 React and React. |
Props: label <CheckBoxComponent label="Inputs"></CheckBoxComponent> | Props: label <Checkbox label="Inputs"></Checkbox> | Both EJ2 React and React implementations fully support the label prop, allowing you to provide descriptive text for your checkbox components. |
Props: labelPosition <CheckBoxComponent labelPlacement='Before' label='Inputs'></CheckBoxComponent> | Props: labelPlacement <Checkbox labelPlacement={Position.Left} label='Inputs' ></Checkbox> | When migrating from EJ2 to React, use the labelPlacement property instead of the labelPosition property to configure the position of the checkbox label. |
Props: disabled <CheckBoxComponent disabled={true}></CheckBoxComponent> | Props: disabled <Checkbox disabled={true}></Checkbox> | The disabled prop is supported in both EJ2 React and React. |
Props: e-small, e-large <CheckBoxComponent cssClass='e-small'> Small </CheckBoxComponent> | Props: size <Checkbox size={Size.Small} >Small</Checkbox> | 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. |
| EJ2 React | React | Description |
|---|
Methods: destroy <CheckBoxComponent id="check"
content="Checkbox"
ref={(scope) => {
this.checkObj = scope
} />
constructor(props: {}) {
this.checkObj.destroy();
}}
| useEffect(() => {
return () => {
console.log('destroyed');
};
}, []);
<Checkbox onChange={(e) => handleClose(e)}></Checkbox> | 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. |
Methods: toggle <CheckBoxComponent id="check"
content="Checkbox"
ref={(scope) => {
this.checkObj = scope
} />
constructor(props: {}) {
this.checkObj.toggle();
}}
| Not applicable | Use state management with setCheckedState to manually toggle in React. |
| EJ2 React | React | Description |
|---|
Event: onCheckedChange <CheckBoxComponent onCheckedChange={(e) => handleClose(e)}></CheckBoxComponent> | Event: onChange <Checkbox onChange={(e) => handleClose(e)}></Checkbox> | When migrating from EJ2 to React, replace the onCheckedChange event handler with onChange, which serves the same purpose but follows React's conventional naming pattern for handling checkbox state changes. |
Events: focusIn <CheckBoxComponent focusIn={() => console.log('focusIn')}></CheckBoxComponent> | Events: onFocus <Checkbox onFocus={(e) => handleClose(e)}></Checkbox> | When migrating from EJ2 to React, replace the focusIn event with the standard React onFocus event handler for proper focus management in your checkbox components. |
Events: focusOut <CheckBoxComponent focusOut={() => console.log('focusOut')}></CheckBoxComponent> | Events: onBlur <Checkbox onBlur={() => console.log('onBlur')}></Checkbox> | When migrating from EJ2 to React, replace the focusOut event handler with the standard React onBlur event handler to maintain the same blur detection functionality for your checkbox components. |