Skip to main content

useCanvasHover()v4.0.527

Subscribes to the current hovered sequence in a React component.

warning

Experimental API: This package is not stable. Its public API may change without a major version bump.

HoverStatus.tsx
import {useCanvasHover, type CanvasController} from '@remotion/canvas';

export const HoverStatus = ({controller}: {controller: CanvasController}) => {
  const hover = useCanvasHover(controller.hover);
  return <span>{hover ? `Hover from ${hover.source}` : 'No hover'}</span>;
};

Parameter​

controller​

A CanvasHoverController, usually controller.hover from useCanvasController().

Return value​

A CanvasHover object or null.

key​

The identity of the hovered mounted sequence instance.

nodePathKey​

The source node identity shared by instances of that source node.

source​

'canvas' or 'timeline', indicating which surface set the hover.

For a single layer row, use useCanvasSequenceHover() instead. It returns a boolean and pointer handlers for that row.

Compatibility​

BrowsersEnvironments
Chrome
Firefox
Safari

See also​