add / removeEventListener passive options?

[wadackel]

Thank you for awesome library!

I want to improve the performance of window.onscroll. must use the addEventListener passive option for that.

There are several proposals in the options of how to specify, what do you think?

Pattern 1: Wrapped function

// App.js
import EventListener, { withOptions } from "react-event-listener";

class Example extends Component {
  handleScroll(e) {
    // ...
  }

  render() {
    return (
      <EventListener
        target={window}
        onScroll={withOptions(this.handleScroll, {capture: false, passive: true})}
      />
    );
  }
}

Pass a handler in object form, there is a pattern to specify the options.
I believe that this pattern is good.

• Pros
  • In the future it can be extended if there was additional flag.
  • It can be implemented with backwards compatibility.
• Cons
  • ??

Pattern 2: Capture like

<EventListener
  target={window}
  onScrollPassive={this.handleScroll}
/>

• Pros
  • Simple syntax & API.
  • It can be implemented with backwards compatibility.
• Cons
  • Additional flag is broken and there. (Example: onScrollCapturePassiveFooBar)

Pattern 3: Pass in component props

<EventListener
  passive
  target={window}
  onScrollPassive={this.handleScroll}
/>

• Pros
  • Simple syntax & API.
  • In the future it can be extended if there was additional flag.
• Cons
  • passive options would be across all of the handler. (Example: onResize)

Side note: Polyfill sample of passive options

IE8 for the simple sample has been excluded.

// Check compatible
let supportsPassive = false;

try {
  const options = Object.defineProperty({}, 'passive', {
    get() {
      supportsPassive = true;
    }
  });
  window.addEventListener('test', null, options);
} catch (e) {}

// Usage
function on(target, type, handler, options) {
  let optionsOrCapture = options;

  if (!supportsPassive) {
    optionsOrCapture = options.capture;
  }

  target.addEventListener(type, handler, optionsOrCapture);
}

function off(target, type, handler, options) {
  // ...
}

[oliviertassinari]

IMHO, the pattern 1 is far better. It could also be something like:

      <EventListener
        target={window}
        onScroll={{
          handler: this.handleScroll,
          options: {
            capture: false,
            passive: true,
         }
        }
      />

[wadackel]

Implementation of withOptions was thinking the following such simple things.

export function withOptions(handler, options) {
  return { hanlder, options };
}

I think that your code may be simple !

[oliviertassinari]

@tsuyoshiwada In that case, I don't see the harm in having a withOptions helper 👍 .
I'm not sure users will us it. But anyway.

[wadackel]

Thanks!
It is also likely to be easy to extend by cutting as a Function 😄

It sends a PR After implementing this!