useSpeedDial

Usage#

import { useSpeedDial } from '@primereact/headless/speeddial';
 
const { rootProps, triggerProps, listProps, getItemProps, actionProps, state } = useSpeedDial({ direction: 'up' });
 
return (
    <div {...rootProps}>
        <button {...triggerProps}></button>
        <ul {...listProps}>
            <li {...getItemProps(0)}>
                <button {...actionProps}></button>
            </li>
        </ul>
    </div>
);

useSpeedDial manages visibility, keyboard navigation, and positional calculations for action items — see Primitive for a component-based API.

Features#

• Returns spread-ready prop objects: rootProps, triggerProps, listProps, actionProps, and getItemProps(index)
• Four layout types: linear, circle, semi-circle, quarter-circle
• Eight direction options: up, down, left, right, up-left, up-right, down-left, down-right
• Computed transitionDelay and positional styles per item via getItemProps
• Auto-close on outside click via hideOnClickOutside

Behavior#

Direction#

Set direction to control where items appear relative to the trigger. Defaults to up.

const speeddial = useSpeedDial({ direction: 'right' });

Layout Type#

Set type to circle, semi-circle, or quarter-circle for radial layouts. Use radius to control the distance from the trigger.

const speeddial = useSpeedDial({ type: 'circle', radius: 80 });

Transition Delay#

Set transitionDelay to control the staggered animation timing (in ms) between items. Defaults to 30.

const speeddial = useSpeedDial({ transitionDelay: 80 });

The delay for each item is calculated as index * transitionDelay when opening and reversed when closing.

Controlled Visibility#

Use visible and onVisibleChange for programmatic control over the open state.

const [visible, setVisible] = React.useState(false);
const speeddial = useSpeedDial({
    visible,
    onVisibleChange: (e) => setVisible(e.value)
});

Hide on Click Outside#

Set hideOnClickOutside to false to keep the menu open when clicking outside. Defaults to true.

const speeddial = useSpeedDial({ hideOnClickOutside: false });

Item Style Calculation#

getItemProps(index) returns computed style with transitionDelay and positional coordinates for non-linear layouts. Spread these on each item element.

const itemProps = speeddial.getItemProps(0);
// { id, role, style: { transitionDelay, left, top }, 'data-scope', 'data-part', ... }

Custom Styling with Data Attributes#

Prop objects include data-scope="speeddial" and data-part attributes. The trigger receives data-open or data-closed based on visibility state.

[data-scope='speeddial'][data-part='trigger'][data-open] {
    transform: rotate(45deg);
}
 
[data-scope='speeddial'][data-part='item'] {
    opacity: 0;
    transform: scale(0.5);
    transition:
        opacity 200ms ease,
        transform 200ms ease;
}
 
[data-scope='speeddial'][data-part='item'][data-active] {
    outline: 2px solid var(--primary);
}

API#

useSpeedDial#

Accessibility#

See SpeedDial Primitive for WAI-ARIA compliance details and keyboard support.