Active Wheel Event Handler Directive

This example shows you how to override a ref and add an event listener to it with a directive. An $onWheelActive event is added to all DOM elements. It is similar to the onWheel event, but it sets { passive: false } when registering the event.

function onWheelActiveDirective(next, type, { $onWheelActive, ...props }, key) {
  if ($onWheelActive) {
    return (
      <WithOnWheelActive callback={$onWheelActive} key={key}>
        {next(type, props)}
      </WithOnWheelActive>
    );
  }

  return next(type, props, key);
}

Visit the source code of this example to see the full implementation.

Usage

function App() {
  return (
    <div style={{ height: 100, overflow: 'auto' }}>
      <div style={{ height: 200 }}
        $onWheelActive={(ev) => ev.preventDefault()}
      >
        Try to scroll with the mouse wheel. You can't!
      </div>
    </div>
  );
}

http://localhost:3000

Try to scroll with the mouse wheel. You can't!

Typescript types

declare module 'react' {
  interface DOMAttributes<T> {
    $onWheelActive?: WheelEventHandler<T> | undefined;
  }
}