Modal in React Speed Dial

9 Aug 20262 minutes to read

Enable modal mode for the SpeedDial component by setting the modal property to true. When modal is enabled, a semi-transparent overlay appears behind the popup, dimming the background and preventing user interaction with page content outside the SpeedDial menu. This is useful for creating focused user experiences or guiding users through required actions.

app.jsx

import { SpeedDialComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import '../index.css';

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;
createRoot(document.getElementById('button')).render(<App />);

app.tsx

import { SpeedDialComponent, type SpeedDialItemModel } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import '../index.css';

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;
createRoot(document.getElementById('button')!).render(<App />);