Events in React Floating action button component

23 May 20234 minutes to read

This section explains the available events in Floating Action Button component.

created

Event triggers after the creation of Floating Action Button.

import { FabComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

function App() {

    function onCreate(): void {
        //Your required action here
    }

    return (
        {/* To render Floating Action Button */}
        <FabComponent id='fab' iconCss='e-icons e-edit' content='Edit' created={onCreate}></FabComponent>
    );
}
export default App;

onclick

Event triggers when the Floating Action Button is clicked.

import { FabComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

function App() {

    function onClick(): void {
        //Your required action here
    }

    return (
        {/* To render Floating Action Button */ }
        < FabComponent id = 'fab' iconCss = 'e-icons e-edit' content = 'Edit' onClick = {onClick}></FabComponent >
    );
}
export default App;

Below example demonstrates the click event of the Floating Action Button.

app.jsx

import { FabComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
function App() {
    function onClick() {
        alert("Edit is clicked!");
    }
    return (<div>
            <div id="targetElement" style={{ position: 'relative', minHeight: '350px', border: '1px solid' }}></div>
            {/* To render Floating Action Button */}
            <FabComponent id='fab' iconCss='e-icons e-edit' content='Edit' onClick={onClick} target='#targetElement'></FabComponent>
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));

app.tsx

import { FabComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

function App() {

    function onClick(): void {
        alert("Edit is clicked!");
    }

    return (
        <div>
            <div id="targetElement" style={{ position: 'relative', minHeight: '350px', border: '1px solid' }}></div>
            {/* To render Floating Action Button */ }
            <FabComponent id='fab' iconCss='e-icons e-edit' content='Edit' onClick={onClick} target='#targetElement'></FabComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));

index.css

/* Represents the styles for loader */
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}