Callbacks for click, hover, keydown

[oyeanuj]

Hey @cookpete! So far, things have been going great while integrating with react-player but ran into a small roadblock. I was trying to implement -

1. Play/Pause onClick
2. Show/hide controls onMouseOver/onMouseOut
3. Keyboard manipulations onKeyDown

But it seems none of these events are exposed at the moment. My current workaround is to have a div around ReactPlayer and tying all the callbacks to that div but it isn't the nicest solution.

Thoughts? Do you think these can be exposed?

Thank you!

[cookpete]

Yeah an object of props to attach to the wrapper div makes sense. What name would make sense though? events?

<ReactPlayer
  url='file.mp3'
  events={{
    onClick: () => {},
    onMouseOver: () => {}
  }}
/>

Maybe events doesn't make sense as it could hold any attribute to attach to the wrapper. Maybe wrapperProps or wrapperAttributes? Is there an established term for "other props to blindly attach to a component"?

[oyeanuj]

In my experience, I think most components just pass through any other props with just the spread syntax after slicing off the props they needed.

So, I feel like we might not even need a wrapper unless you feel it is cleaner.

[cookpete]

There is already a wrapper div here that we can attach stuff to. The problem is that using the spread syntax would require something like

const { url, playing, volume, blah, blah, blah, ...extra } = this.props

which would be huge and impractical considering the amount of props we have. That's why I'm thinking something like wrapperProps or maybe just attributes so that we can simply do

<div style={...} className={...} {...attributes} />

for the wrapper.