Positions in React Speed Dial

4 Sep 202612 minutes to read

Position the React Speed Dial component anywhere on the page or within a specific container using the position property. If a target element is specified, the React Speed Dial positions itself relative to that container; otherwise, it positions relative to the browser viewport.

The available position values are:

TopLeft
TopCenter
TopRight
MiddleLeft
MiddleCenter
MiddleRight
BottomLeft
BottomCenter
BottomRight

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

function App() {
  return (<div>
    <div id="targetElement" style=></div>
    <SpeedDialComponent id='speeddial' content='Add' position='BottomLeft' target="#targetElement"></SpeedDialComponent>
  </div>);
}
export default App;
createRoot(document.getElementById('button')).render(<App />);
import { SpeedDialComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import '../index.css';

function App() {
  return (
    <div>
      <div id="targetElement" style=></div>
      <SpeedDialComponent id='speeddial' content='Add' position='BottomLeft' target="#targetElement"></SpeedDialComponent>
    </div>
  );
}
export default App;
createRoot(document.getElementById('button')!).render(<App />);

Opens items on hover

Auto-open the React Speed Dial action items when the user hovers over the button by enabling the opensOnHover property. By default, items only display when the button is clicked. Enabling hover opening provides a more interactive experience where items appear as the user approaches the button.

app.jsx
app.tsx
index.css
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. */}
    <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' items={items} opensOnHover={true} target="#targetElement"></SpeedDialComponent>
  </div>);
}
export default App;
createRoot(document.getElementById('button')).render(<App />);
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. */}
      <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' items={items} opensOnHover={true} target="#targetElement"></SpeedDialComponent>
    </div>
  );
}
export default App;
createRoot(document.getElementById('button')!).render(<App />);
/* Represents the styles for loader */
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

Programmatically show/hide Speed Dial items

Control React Speed Dial popup visibility through code using the show and hide methods. The show() method opens the popup, while hide() closes it. This allows you to integrate React Speed Dial opening/closing with other UI events or workflows.

The following example demonstrates how to open and close the action items programmatically on button click.

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

function App() {
    let speeddialObj;
    const items = [
        { iconCss: 'e-icons e-cut' },
        { iconCss: 'e-icons e-copy' },
        { iconCss: 'e-icons e-paste' }
    ];
    function showClick() {
        speeddialObj.show();
    }
    function hideClick() {
        speeddialObj.hide();
    }
    return (<div>
        <div id="targetElement" style=>
            <ButtonComponent id="show" cssClass="e-primary" onClick={showClick}> Show </ButtonComponent>
            <ButtonComponent id="hide" cssClass="e-primary" onClick={hideClick}> Hide </ButtonComponent></div>
        <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' items={items} opensOnHover={true} target="#targetElement" ref={(scope) => { speeddialObj = scope; }}></SpeedDialComponent>
    </div>);
}
export default App;
createRoot(document.getElementById('button')).render(<App />);
import { ButtonComponent, SpeedDialComponent, type SpeedDialItemModel } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import '../index.css';

function App() {
  let speeddialObj: SpeedDialComponent;
  const items: SpeedDialItemModel[] = [
    { iconCss: 'e-icons e-cut' },
    { iconCss: 'e-icons e-copy' },
    { iconCss: 'e-icons e-paste' }
  ];
  function showClick(): void {
    speeddialObj.show();
  }
  function hideClick(): void {
    speeddialObj.hide();
  }
  return (
    <div>
      <div id="targetElement" style=>
        <ButtonComponent id="show" cssClass="e-primary" onClick={showClick}> Show </ButtonComponent>
        <ButtonComponent id="hide" cssClass="e-primary" onClick={hideClick}> Hide </ButtonComponent></div>
      <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' items={items} opensOnHover={true} target="#targetElement" ref={(scope) => { speeddialObj = scope; }}></SpeedDialComponent>
    </div>
  );
}
export default App;
createRoot(document.getElementById('button')!).render(<App />);

Programmatically refresh the position

Update the React Speed Dial’s position dynamically using the refreshPosition method. Call this method when the target element’s position changes (e.g., after window resize or layout changes) to ensure the React Speed Dial repositions correctly relative to its target container.

The following sample demonstrates how to refresh the React Speed Dial position when layout changes.

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

function App() {
    let speeddialObj;
    const items = [
        { iconCss: 'e-icons e-cut' },
        { iconCss: 'e-icons e-copy' },
        { iconCss: 'e-icons e-paste' }
    ];
    function refresh() {
        document.getElementById("targetElement").style.minHeight = "300px";
        speeddialObj.refreshPosition();
    }
    return (<div>
      <div id="targetElement" style=>
      <ButtonComponent id="refresh" cssClass="e-primary" onClick={refresh}> Refresh </ButtonComponent></div>
      <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' items={items} position='MiddleRight' target="#targetElement" ref={scope => { speeddialObj = scope; }}></SpeedDialComponent>
    </div>);
}
export default App;
createRoot(document.getElementById('button')).render(<App />);
import { ButtonComponent, SpeedDialComponent, type SpeedDialItemModel } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import '../index.css';

function App() {
  let speeddialObj: SpeedDialComponent;
  const items: SpeedDialItemModel[] = [
    { iconCss: 'e-icons e-cut' },
    { iconCss: 'e-icons e-copy' },
    { iconCss: 'e-icons e-paste' }
  ];
  function refresh(): void {
    document.getElementById("targetElement").style.minHeight = "300px";
    speeddialObj.refreshPosition();
  }
  return (
    <div>
      <div id="targetElement" style=>
        <ButtonComponent id="refresh" cssClass="e-primary" onClick={refresh}> Refresh </ButtonComponent></div>
      <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' items={items} position='MiddleRight' target="#targetElement" ref={scope => { speeddialObj = scope }}></SpeedDialComponent>
    </div>
  );
}
export default App;
createRoot(document.getElementById('button')!).render(<App />);

Search docs

Ask Syncfusion AI Assistant