Last active
September 25, 2021 03:45
-
-
Save nleush/01fabc8d1287e64d68515b554be7057c to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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()} /> | |
} |
@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 }} />
</>
);
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@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.