Inject React Component as content

[jojojoleeleelee]

Hello! I was wondering, is it possible to add a react component as the content?

I added the component inside the overlay like so -

 this.player.overlay({
      content: <SomeReactComponent />,
      align: 'bottom-left',
      overlays: [{
        start: 'play',
        end: 'end'
      }]
    });

and the SomeReactComponent is just a react component for a dynamic image renderer that looks like this

import like from './like.png';
import love from './love.png';
import neutral from './neutral.png';

class SomeReactComponent extends Component {
  getImage(pic) {
    const image = pic;
    return image;
  }

  render() {
    const pic = [love, like, neutral];
    
    return (
        <div>
          { sentimentsArray.map(sentiment =>
            <img src={this.getImage(pic)} style={{ width: '75%', height: '75%', objectFit: 'scale-down' }} />
          )}
        </div>
    );
  }
}

When i call this.player.overlay in my console, it says the overlays.options.content is a Symbol of React.element, however, I'm not getting anything as an overlay

[dom-paul]

Hey, Where you able to figure how to achieve this? I am looking for something similar

[josewweee]

what i did was. const plainHtml = SomeReactComponent(); and then. this.player.overlay({ content: renderToStaticMarkup(plainHtml), align: 'bottom-left', overlays: [{ start: 'play', end: 'end' }] });

the problem with this approach is that buttons inside the plainHtml wont work as expected. if you guys have a better way, let me know. thanks