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

API
1

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 - API - Twitch Developer Forums

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!

2

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”

3

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 ?

4

Is no one using Twitch embed within React ?

5

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