React and Duck Typing example

A generic player control component

Player Control Component

Using refs

This part shows the duck typing example using the "common way" of the pattern, with inversion of control in runtime and doing the PlayerControl component call the elements methods.

But React don't work well in this way, as we need to use refs to access the component "methods". But not all elements are going to be audio or video, leading use to a anti-pattern when using React

Audio track
Video track
Slides

The Proper React Way

Using HOC

Instead of using ref's for everything we can just encapsulate the audio and video elements inside a high order component which listens to propertychanges and then call these element methods. You can check it here.

For everyone else (React components), the refactored PlayerControlare going to pass always the same properties (play, pause and stop), expecting the same behaviour from everyone.

Audio track
Video track
Slides