React Floating Action Button - Getting Started

NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.

The Floating Action Button (FAB) is the primary action button on a screen that is displayed in front of all screen content. The FAB can execute an action or open a stack of two to five related actions (speed dial).

There should be only one FAB on a screen, but its action(s) can be different for different screens. For more details on the FAB concept and best practices, refer to the following topic: Material Design Guidelines.

In DevExtreme, the FAB is implemented as a container that collects and stores SpeedDialAction components.

From this tutorial, you will learn how to create a single- or multi-action FAB and alter action sets during screen transitions.

NOTE

Code examples in this tutorial use icons from the Ionicons library. If you are going to replicate the examples in your application, install the ionicons npm package:

  • npm install ionicons@4 --save

Single Action

A single-action FAB represents the primary action of a screen. According to the guidelines, this action should be constructive, such as, create, share, explore, or edit, as in the following example:

To create a single-action FAB, add one SpeedDialAction to your page and specify its onClick and icon properties. Other properties are optional, but we also specify a hint.

To position the FAB, use the floatingActionButtonConfig.position property in the GlobalConfig object.

Refer to the GitHub repository for the code that configures the example above and illustrates the described techniques.

View on GitHub

Multiple Actions (Speed Dial)

The FAB can open a menu with several related actions (speed dial).

To create a FAB that opens a speed dial, add multiple SpeedDialAction components to a page, each with an individual icon and onClick event handler. The actions are sorted according to their indexes.

FAB parameters are configured in the floatingActionButtonConfig object. Use it to change the FAB's position, maximum number of actions, icons in the open and close states, and other parameters.

Refer to the GitHub repository for the code that configures the example above and shows how to set the described properties.

View on GitHub

Handle Screen Transitions

Different screens use different FABs because a FAB should perform or contain only actions that can be performed on a particular screen. The DevExtreme TabPanel is used to emulate switching between screens.

To implement this behavior, you can place the actions in separate components if the components have different URLs. No further configuration is required in this case.

The approach is different if the components have the same URL, or actions are in the same component. Change the visible property of each SpeedDialAction when the screen is switched. Set this property to true if an action can be performed on the current screen. Otherwise, set it to false.

The following code shows the TabPanel configuration and an empty switchSDA function. This function controls the actions' visibility when it is implemented later.

App.js
App.css
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.material.blue.light.css';
  • // Custom icons by Ionicons
  • import 'ionicons/dist/css/ionicons.css';
  •  
  • import './App.css';
  •  
  • import TabPanel, { Item } from 'devextreme-react/tab-panel';
  •  
  • class App extends React.Component {
  • switchSDAs(e) {
  • // To be implemented
  • }
  •  
  • render() {
  • return (
  • <div id="app-container">
  • <TabPanel
  • onSelectionChanged={this.switchSDAs}>
  • <Item title="Edit tab">
  • <p>Edit tab's content</p>
  • </Item>
  • <Item title="Share tab">
  • <p>Share tab's content</p>
  • </Item>
  • </TabPanel>
  • {/* To be implemented */}
  • </div>
  • );
  • }
  • }
  • export default App;
  • .dx-fa-button-icon, .dx-fa-button-icon-close {
  • text-align: center;
  • }
  •  
  • p {
  • text-align: center;
  • }
  •  
  • #app-container {
  • height: 360px;
  • width: 320px;
  • }
  •  
  • .dx-tabpanel .dx-tabs-wrapper {
  • display: flex;
  • flex-flow: row nowrap;
  • }
  •  
  • .dx-tab {
  • display: flex;
  • flex-flow: row nowrap;
  • flex: 1;
  • justify-content: center;
  • }

The following code adds four SpeedDialActions to the page, but only the "Edit" action is visible at launch. The switchSDA function changes the actions' visibility based on the selected tab:

App.js
  • // ...
  • import SpeedDialAction from 'devextreme-react/speed-dial-action';
  • import config from 'devextreme/core/config';
  • import notify from 'devextreme/ui/notify';
  •  
  • class App extends React.Component {
  • constructor(props) {
  • super(props);
  • config({
  • floatingActionButtonConfig: {
  • icon: 'icon ion-md-share',
  • position: {
  • my: 'right bottom',
  • at: 'right bottom',
  • of: '#app-container',
  • offset: '-16 -16'
  • }
  • }
  • });
  • this.state = {
  • currentTab: 'Edit tab'
  • }
  • this.switchSDAs = this.switchSDAs.bind(this);
  • }
  •  
  • switchSDAs(e) {
  • this.setState({
  • currentTab: e.addedItems[0].title
  • });
  • }
  •  
  • render() {
  • return (
  • <div id="app-container">
  • {/* TabPanel is configured here */}
  • <SpeedDialAction
  • hint="Edit"
  • icon="icon ion-md-create"
  • visible={this.state.currentTab === 'Edit tab'}
  • onClick={() => showNotification('Edit is clicked')}
  • />
  • <SpeedDialAction
  • hint="Copy to clipboard"
  • icon="icon ion-md-copy"
  • visible={this.state.currentTab === 'Share tab'}
  • onClick={() => showNotification('Copied to clipboard')}
  • />
  • <SpeedDialAction
  • hint="Send by email"
  • icon="icon ion-md-mail"
  • visible={this.state.currentTab === 'Share tab'}
  • onClick={() => showNotification('Sent by email')}
  • />
  • <SpeedDialAction
  • hint="Share on Facebook"
  • icon="icon ion-logo-facebook"
  • visible={this.state.currentTab === 'Share tab'}
  • onClick={() => showNotification('Shared on Facebook')}
  • />
  • </div>
  • );
  • }
  • }
  •  
  • function showNotification(message) {
  • notify({
  • message: message,
  • position: {
  • my: 'left bottom',
  • at: 'left bottom',
  • of: '#app-container',
  • offset: '16 -16'
  • },
  • minWidth: null,
  • width: 320 * 0.7
  • }, 'info', 1000);
  • }
  • export default App;

You can find the full code in the following GitHub repository: getting-started-with-floating-action-button-screen-transitions.

For more information on the Floating Action Button's functionality, explore the following resources: