Embed Mixcloud Media Into a React Website

Introduction
How do you embed a Mixcloud media player into a React website or application?
In this article, we're going to walk through the process of embedding a Mixcloud media player into a React application/website. To do most of the heavy lifting, we'll use the ReactPlayer NPM package to embed the video player.
Before working through this article, we assume that you already have a React application created. If you need help creating one, we have an article that lays out 6 different ways to create a React application.
Let's get started!
Table Of Contents
Install ReactPlayer NPM Package
First, we need to install the ReactPlayer NPM package. You can install it using one of the below commands:
NPM:
npm install react-player --save
Yarn:
yarn add react-player
Now we're ready to embed the Mixcloud media element into your React application.
Use ReactPlayer To Embed The Mixcloud Player
Open the page in your React application you want to add the Mixcloud media player to and import the ReactPlayer NPM package into the page:
import ReactPlayer from "react-player"
This will make the <ReactPlayer />
component available for use in the page.
Here is how you'd put the component to use:
import React from "react"
import ReactPlayer from "react-player"
function App() {
return (
<div>
<ReactPlayer
url="https://www.mixcloud.com/Johnny_B/back-in-the-daze-volume-02-july-2019-oldskool-91-93-hardcore-mix-by-johnny-b/"
controls
/>
</div>
)
}
export default App
This code will embed a Mixcloud media player into your page with the song located at the given url
props value. We also supplied the component with a controls
props value. This tells ReactPlayer
to show the player controls native to Mixcloud.
After you save the file and reload the page, you should see the media player in the page.

The ReactPlayer
component is now embedded in your webpage!
There are several other props data you can add to the component beyond the url
and control
values. Check out the project's documentation or play around with their demo for more information.
Conclusion
You have successfully embedded a Mixcloud player into your application.
Thanks for reading and happy coding!