How to embed Twitch Channel into React component without calling New on every render?

Hi, I found this doc on embedding our channel:

and this article that is trying to use an iframe instead (which doesn’t seem to be documented?) :slight_smile: Embedding Twitch Channel

This first article proposes a fine solution for basic JS but for React I cannot figure out how to make it work.

If using an iframe is a “supported” option I would use that. Where is the documentation on using an iframe to embed our channel?
Many thanks!

Its documented here, and comes with “less” control options than “Embed Everything” does. But if you just want a “dumb iFrame”:

Embed Everything is just a “preferred method”

Barry, thank you! I might change over to the iframe. FYI in my TwitchEm component, I was trying something like this (abridged)

componentDidMount() {
this._isMounted = true;
this.initialize();
}

initialize() {
var w = this.twitchSize.width;
var h = this.twitchSize.height;
var chan = this.twitchChannel;
var par = this.twitchParents;

  this.twitchDiv = React.createElement('div', {id:"twitch-embed"});
  this.twitchEmbed = new Twitch.Embed("twitch-embed", {
      width: w, height: h, channel: chan, parent: par
    }); // from this I get react-dom.production.min.js?ca5d:198 MissingElementError: Could not find the provided element: twitch-embed

  if(!this.twitchEmbed) {
    console.log("Can't create Twitch embed")
    return;
  }

}

render() {
return (
<React.Fragment>
{this.twitchDiv}
</React.Fragment>
);
}

Is there a React example that works without creating a new embed object each render ?

Is no one using Twitch embed within React ?

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.