Help for using with Docusaurus about iframemanager

[jtraulle]

Thank you for your help @orestbida, really appreciated 😎 !

This is working great 🎉

[orestbida]

Hi @jtraulle,

I've never used Docusaurus but - based on it's doc. - you can import any React component inside mdx files.

1. create a basic component IframeManagerComponent and initialize the plugin inside the useEffect hook:

   import React, {useEffect} from 'react';
   
   import "./iframemanager.css";
   import "./iframemanager.js";
   
   export default function IframeManagerComponent() {
   
       useEffect(() => {
   
           // obtain plugin only once (important)
           if(!window._manager)
               window._manager = window.iframemanager();   
   
           window._manager.run({
               // your config
           });
   
       }, []);
   
       return (null);
   }

2. import the component in any .mdx file:

   ---
   title: demo post
   slug: mdx-blog-post
   ---
   <!-- import component -->
   import IframeManagerComponent from "../src/components/IframeManagerComponent.js";
   
   <h1>This is title</h1>
   <p>this is description</p>
   
   <div 
       data-service="youtube" 
       data-id="861gfPVmgdc"
       data-params="start=21&mute=1"
       data-thumbnail="https://i.pinimg.com/originals/0a/4d/cb/0a4dcb92fa2d3c601b58d72720d6bec4.jpg"
       data-thumbnailpreload
       data-autoscale >
   </div>
   
   <!-- run component -->
   <IframeManagerComponent/>