Documentation

Working With React

Get started with React

React is a popular JavaScript library for building user interfaces.

Radiant Media Player can easily be used in a React app - in this guide we will review how.

Scope of support

We support the following environment for using Radiant Media Player with React framework:

  • React v18+

While it is possible that Radiant Media Player would work with previous versions of React, those versions have not been tested by us.

Creating our sample React app

In this guide we will use the Create React App environment. This is a good start point for building a single-page application in React. We can install this development environment with:

npx create-react-app my-app
cd my-app
npm start

At http://localhost:3000/ we can now see the demo React app.

Installing Radiant Media Player in a React app

First we need to add Radiant Media Player as an external library to our React app. This is done in the public/index.html file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <!-- Include Radiant Media Player library in your <head> -->
  <script src="https://cdn.radiantmediatechs.com/rmp/8.1.2/js/rmp.min.js"></script>
  <title>React App</title>
</head>
            
<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>
            
</html>

Then we will create our Player component in a separated src/Player.js file:

import React, { Component } from 'react';

class Player extends Component {
              
  render() {
    return (
      <div id="rmp"></div>
    );
  }
              
  componentDidMount() {
    const src = {
      hls: 'your-hls-url'
    };
    const settings = {
      licenseKey: 'your-license-key',
      src: src,
      width: 640,
      height: 360
    };
    const elementID = 'rmp';
    const rmp = new window.RadiantMP(elementID);
    rmp.init(settings);
  }
}

export default Player;

We will now inject our player component in src/App.js:

import logo from './logo.svg';
import './App.css';
import Player from './Player';
              
function App() {
  return (
    <div className="App">
      <header className="App-header">
        { /* Our player component goes here */ }
        <Player />
        <img src={logo} className="App-logo" alt="logo" />
        <p>Edit <code>src/App.js</code> and save to reload.</p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React</a>
      </header>
    </div>
  );
}
              
export default App;

Last we need to remove the React StrictMode in the src/index.js file otherwise the player will render twice:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
              
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <App />
);
reportWebVitals();

We can now save our changes and see the live result at http://localhost:3000/!

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.

©2015-2022 Radiant Media Player. All Rights Reserved.