iframely-react.js

// Include Iframely embed.js in your page using preferred method. E.g.:
// <script src="//cdn.iframe.ly/embed.js?api_key=[your key here]"></script>

// Add following methods to your component.

  componentDidMount: function() {
    // Builds widget after embed code rendered.
    window.iframely && iframely.load();
  },

  getIframelyHtml: function() {
    // Use embed code from API.
    return {__html: this.iframelyEmbedHtmlCode};
    
    // Alternatively you can use widget generator without embed code from API.
    // return {__html: '<a href="' + this.url + '" data-iframely-url>' + this.title + '</a>'};
  }
  
  render: function () {
    // Render raw widget html using 'dangerouslySetInnerHTML' attribute.
    return <div dangerouslySetInnerHTML={this.getIframelyHtml()} />
  }

Where does iframelyEmbedHtmlCode come from?
https://gist.github.com/nleush/01fabc8d1287e64d68515b554be7057c#file-iframely-react-js-L13

Does it come from the Iframely api?

Yes, iframelyEmbedHtmlCode is html attribute from Iframely API response, or any other oEmbed response.

@nleush - did you figure out how to get iFramely to work in react? Their docs make A LOT of assumptions about things unknown to me. I'm hoping someone has figured this out.

@tlester - This example actually works. Do you have any specific questions?

@nleush - I'm running in a functional component. I can't get it to work. I can get it to present visually, but it doesnt' run. For example, If I have a youtube link, it'll desplay the thumbnail and such, but the play button won't work.

import React, { useEffect, useState } from "react"
import parse from "html-react-parser"
import axios from "axios"
import { Helmet } from "react-helmet"
import EmbedContainer from "react-oembed-container"

const API_KEY = "ce85ecff19fbd7dba1cf97"

export default function OEmbed(props) {
    const [html, setHtml] = useState({ __html: "<div />" })

    useEffect(() => {
        axios.get(`https://iframe.ly/api/oembed?url=${props.domEl.attribs.url}&api_key=${API_KEY}&iframe=1&omit_script=1`).then((res) => {
            console.log(res.data)
            setHtml({ __html: res.data.html })
        })
    }, [])

    if (html) {
        console.log(html)
        return (
            <div>
                <Helmet>
                    <script src="https://cdn.iframe.ly/embed.js" async></script>
                </Helmet>
                <div dangerouslySetInnerHTML={html} />
            </div>
        )
    }
    return <div />
}

@tlester - Here is a code snippet that is working with a functional component. Note I'm using Next.js so you'll need to inject the embed.js script another way if you're not using Next.js.

import { useEffect, useState } from 'react';
import Script from 'next/script';
import axios from 'axios';

export default function Iframely() {
  const [html, setHtml] = useState(null);

  useEffect(() => {
    async function getHtml() {
      const url = encodeURIComponent(
        'https://gist.github.com/nleush/7e7775c9709eb3bdb6e6'
      );
      const apiUrl = `https://iframe.ly/api/iframely?url=${url}&api_key={your_api_key}&iframe=1&omit_script=1`;
      const res = await axios(apiUrl);
      console.log(res.data);
      const html = res.data.html;
      setHtml(html);
    }
    getHtml();
  }, []);

  return (
    <>
      <Script src="//cdn.iframe.ly/embed.js" strategy="beforeInteractive" />
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </>
  );
}