hooks/useWheel

Interfaces

UseWheelOptions

Defined in: react/src/hooks/useWheel.ts:7

Extends

• WheelOptions

Properties

requireFocus?

optional requireFocus?: boolean;

Defined in: dom/dist/index.d.ts:580

Only report events while the focus is inside the element.

A control that reacts to the wheel on hover alone takes the scroll away from the page, so passing over one in a long form silently changes its value. Requiring focus makes that an explicit act.

The check is contains, not an identity test: the element that actually takes focus is usually a descendant, such as a thumb or an <input>, and a caller may have replaced it with markup of their own.

Default

false

Inherited from

WheelOptions.requireFocus

target?

optional target?: RefObject<Element | null>;

Defined in: react/src/hooks/useWheel.ts:20

Listen on this element rather than on the one the returned ref callback is attached to, and ignore that callback.

For a control made of several movable parts: a wheel event only reaches what the cursor is over, so a listener per part responds only while the cursor is over that same part. Listening on the element they share lets every part see the event, and each one decide whether it is the one to act.

The element is read when the listener is attached, so a ref filled in by a parent is fine as long as the parent is above in the tree.

Functions

useWheel()

function useWheel<T>(onWheel, __namedParameters?): (node) => void;

Defined in: react/src/hooks/useWheel.ts:30

Listen to wheel events on an element.

The listener is not passive, so the handler may call preventDefault().

Type Parameters

Type Parameter
T extends Element

Parameters

Parameter	Type
onWheel	(event) => void
__namedParameters	UseWheelOptions

Returns

a ref callback to attach to the element, unused when target is given

(node) => void