Custom embed code for React JS

When you are building a website or webapp using React JS, you might want to create your own version of the Riddle Quiz Maker embed code.

The sample code below will allow you to render your Riddle with React JS and it will serve as a great starting point if you are building webapps using other Javascript framworks like Vue JS.

The core problem this altered embed code solves is that our embed.js library is loaded asynchronous and it is rendered on the server side. If your site is build using react JS, this may lead to the riddle not loading every time as React has life cycle methods that renders elements in a certain order.

To ensure that the Riddle embed is loaded first, you can use this special embed code for React JS.

Also React does not support inline styles like normal HTML. Styles need to be passed on as an object, which is what the embed code below does.

The Riddle ID below is a variable, which you can dynamically change to pull in different Riddles from your account.

import React, { Component } from 'react';

class App extends Component {

  componentWillMount () {
    const script = document.createElement("script");

    script.src = "https://www.riddle.com/files/js/embed.js";
    script.async = true;

    document.body.appendChild(script);
  }

  render() {
    const divStyle = {
          margin: "0 auto",
          maxWidth: "100%",
          width: "640px"
        };

    const iframeStyle = {
          margin: "0 auto",
          maxWidth: "100%",
          width: "100%",
          height: "300px",
          border: "1px solid #cfcfcf"
        };

    const riddleID = "120064";
    const riddleUrl = "//www.riddle.com/a/" + riddleID + "?wide=1";

    return (
      <div className="App">
        <div className="riddle_target" data-rid-id={riddleID} data-fg="#252525" data-bg="#EDEDED" style={divStyle} data-auto-scroll="true">
          <iframe title="embed-test" style={iframeStyle} src={riddleUrl}></iframe>
        </div>
      </div>
    );
  }
}

export default App;