React Migration in Floating Action Button Component

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

Properties

EJ2 React	React	Description
Props: `position` `<FabComponent content='Add position="BottomRight" />`	Props: `position` `<Fab position={FabPosition.BottomRight} > Add </Fab>`	The `position` prop is supported in both EJ2 React and React.In EJ2 React, the position property accepts string values like "BottomRight", while in React, it uses typed enums like FabPosition.BottomRight for improved type safety.
Props: `cssClass` `<FabComponent content='Add cssClass="my-fab" />`	Props: `className` `<Fab className="my-fab"> Add </Fab>`	The `cssClass` prop in EJ2 React is replaced with the standard React `className` prop in React.
Props: `visible` `<FabComponent content='Add visible={true} />`	Props: `visible` `<Fab visible={true} > Add </Fab>`	The `visible` prop is supported in both EJ2 React and React. In React, you can also use standard React conditional rendering as an alternative approach.
Props: `toggleable` `<FabComponent content='Add toggleable={true} />`	Props: `toggleable` `<Fab toggleable={true} > Add </Fab>`	The `toggleable` prop is supported in both EJ2 React and React.
Props: `iconCss` `<FabComponent content='Add iconCss="e-icons e-add" />`	Props: `icon` `<Fab icon={svgIcon} > Add </Fab>`	The `iconCss` property used in EJ2 React Button has been replaced with the icon prop (e.g : String and React.ReactNode) in React. This allows direct usage of React components or SVG elements as icons rather than `CSS class` references.
Props: `iconPosition` `<FabComponent content='Add iconCss="e-icons e-add" iconPosition='Right' />`	Props: `iconPosition` `<Fab icon={svgIcon} iconPosition={Position.Right} > Add </Fab>`	In the EJ2 React, the `iconPosition` property accepts string values like `'Right'`, while in React, it uses typed enums like `IconPosition.Right` for better type safety.
Props: `e-flat`, `e-outline` `<FabComponent cssClass='e-flat'>Flat</FabComponent>`	Props: `variant` `<Fab variant={Variant.Standard}>Standard Button</Fab>`	CSS class-based styling (e.g., cssClass='e-flat') in EJ2 React has been replaced with the type-safe variant prop in React. Use the Variant enum with options like `Filled`, `Standard`, and `Outlined`.
Props: `e-primary`, `e-success`, `e-info`, `e-warning`, `e-danger` `<FabComponent content='Add iconCss="e-icons e-add" cssClass='e-warning' />`	Props: `color` `<Fab icon={svgIcon} color={Color.Warning} > Add </Fab>`	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`.
Props: `e-small`, `e-large` `<FabComponent content='Add iconCss="e-icons e-add" cssClass='e-small' />`	Props: `size` `<Fab icon={svgIcon} size={Size.Small} > Add </Fab>`	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: `disabled` `<FabComponent content='Add disabled={true} />`	Props: `disabled` `<Fab disabled={true} > Add </Fab>`	The `disabled` prop is supported in both EJ2 React and React.

Methods

EJ2 React	React	Description
Methods: `show()` `<FabComponent id="fab" content="Add" ref={(scope) => { this.FabObj = scope } /> constructor(props: {}) { this.FabObj.show(); }}`	Not applicable	Use `visible` property with state management in React for controlling visibility.
Methods: `hide()` `<FabComponent id="fab" content="Add" ref={(scope) => { this.FabObj = scope } /> constructor(props: {}) { this.FabObj.hide(); }}`	Not applicable	Use `visible` property with state management in React for controlling visibility.
Methods: `toggle()` `<FabComponent id="fab" content="Add" ref={(scope) => { this.FabObj = scope } /> constructor(props: {}) { this.FabObj.toggle(); }}`	Not applicable	Integrated with `toggleable` prop and internal state handling React integrates `toggle` behavior with the `toggleable` prop and state.

Events

EJ2 React	React	Description
Event: `click` `<FabComponent click={ handleClose }></FabComponent>`	Event: `onClick` `<Fab onClick={ handleClose }></Fab>`	The `click` event in EJ2 React is replaced with the `onClick` event in React, following React's standard event naming convention.