Search results

Events in React FloatingActionButton component

02 Feb 2023 / 2 minutes to read

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

created

Event triggers after the creation of Floating Action Button.

Copied to clipboard
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.

Copied to clipboard
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.

Source
Preview
app.jsx
index.html
app.tsx
Copied to clipboard
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>
            
            <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'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React Floating Action Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
	<link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='button'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
Copied to clipboard
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'));
Contents
Contents