Example of how to create a custom button in react

[yshterev]

Hi @MattiasBuelens
We are trying to implement a react version of theoplayer v7 using the npm package.

In older versions UI was created through videojs, like in the guide here.
https://www.theoplayer.com/docs/theoplayer/how-to-guides/ui/how-to-insert-a-button/

This does not seem to work with new player in react when THEOplayer is imported from the npm package.
var Button = THEOplayer.videojs.getComponent("Button");

Can you give a hint how it should be done? I can also make a PR, I think it will be helpful for others.

[MattiasBuelens]

When importing THEOplayer through the npm package, you should be able to use a namespace import:

import * as THEOplayer from "theoplayer";
var Button = THEOplayer.videojs.getComponent("Button");
// ...

Note: usage with TypeScript

We don't ship TypeScript type definitions for the bundled video.js, so if you're using TypeScript you might need to cast to any first:

import * as THEOplayer from "theoplayer";
var Button = (THEOplayer.videojs as any).getComponent("Button");
// ...

That said, if you're looking to build a player UI using React, we would highly recommend you check out our Open Video UI for React. This new UI doesn't use video.js, instead it's built directly out of React components, making it much easier to use in a React app. See the documentation to get started. 😉

[yshterev]

@MattiasBuelens Thanks for the quick feedback. Very useful 🚀