mediumMachine Coding

Build a Speed Dial Menu

Q: Build a Speed Dial Menu

## Building a Speed Dial Menu in React **Mental model:** A floating action button (FAB) that toggles a stack of action buttons. One `open` boolean controls everything; the actions animate in (translate + fade) with a per-item stagger delay. Close on action click and on outside click. ### Step 1 — Open state + FAB ```jsx const [open, setOpen] = useState(false); setOpen((o) => !o)} style={{ transform: open ? 'rotate(45deg)' : 'none' }}>+ ``` ### Step 2 — Render the action stack Map actions above the FAB; only interactive when open. ```jsx {actions.map((a, i) => ( ))} ``` ### Step 3 — Stagger via transition-delay The `i * 40ms` delay makes items cascade out; CSS `transition` does the motion. ### Step 4 — Close on action or outside click ```jsx const run = (a) => { a.onClick(); set

668 views

Understand the problem

Build a FAB that fans out action buttons on click.

ReactMenuAnimation

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

Solve in

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

React solution

Complete solutionRun Playground

import React from 'react';
import SpeedDial from './src/SpeedDial';

export default function App() {
  return (
    <div style={{ fontFamily: 'sans-serif', padding: 20, height: 320, position: 'relative' }}>
      <h1>Speed Dial Demo</h1>
      <p style={{ color: '#666' }}>Click the + button (bottom-right).</p>
      <SpeedDial
        actions={[
          { icon: '✏️', label: 'Edit', onClick: () => alert('Edit') },
          { icon: '📋', label: 'Copy', onClick: () => alert('Copy') },
          { icon: '🗑️', label: 'Delete', onClick: () => alert('Delete') },
        ]}
      />
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

Build a File Explorer (tree view)

Build a Star Rating component