Modal in React Speed dial component

30 Jan 20232 minutes to read

You can use the modal property to set the Speed Dial as modal which adds an overlay to prevent the background interaction.

app.jsx

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

function App() {
  const items = [
    { iconCss: 'e-icons e-cut' },
    { iconCss: 'e-icons e-copy' },
    { iconCss: 'e-icons e-paste' }
  ];
  return (<div>
    <div id="targetElement" style=></div>
    {/* Initialize the SpeedDial component with modal */}
    <SpeedDialComponent id='speeddial' items={items} openIconCss='e-icons e-edit' modal={true} target='#targetElement'></SpeedDialComponent>
  </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));

app.tsx

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

function App() {
  const items: SpeedDialItemModel[] = [
    { iconCss: 'e-icons e-cut' },
    { iconCss: 'e-icons e-copy' },
    { iconCss: 'e-icons e-paste' }
  ];

  return (
    <div>
      <div id="targetElement" style=></div>
      {/* Initialize the SpeedDial component with modal */}
      <SpeedDialComponent id='speeddial' items={items} openIconCss='e-icons e-edit' modal={true} target='#targetElement'></SpeedDialComponent>
    </div>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));