React Player, Universal Player for ReactJS

John Zhang
Nov 10, 2020

React Player is a very flexible player that I’ve been using in my ReactJs apps. Depending on how you use it, it can play a variety of different media from a multitude of different websites, such as Youtube, Vimeo, Facebook and Soundcloud.

For starters you will need to enter“npm install react-player” or “yarn add react-player” in your terminal of the React app you are making. Upon completion of the download, you will then need to import it, like so:

To then use the import of React Player you would use <ReactPlayer url=’ ’> within the render section. With the URL of your media of choice between the quotes.

This however is the bare minimum, you can then use a “height” or “width” variable similar to how you’d use the url variable to change the size of the player. You can also have the a video auto play by giving it a “playing = {true}” or hiding the natural controls of the youtube with a “controls = {false}”.

Having dabbled with iframes for a while, React Player is much more straightforward and beginner friendly. I would wholeheartedly recommend this for any apps that utilizes online media.

For full documentation on how React Player works and more variables to control other features of the player, please visit this link: https://github.com/CookPete/react-player

--

--