Embed cincopa gallery in react project

Cincopa embed code can be easily integrated to any project.

To start using embed code in vue project must be included runtime library to the project and then call cincopa.boot_gallery method

cincopa.boot_gallery accept 3 params

/**
*
* @param {object} loadObject - { 
*   "_object": "ID of the Element where to append or HTML DOM Element" ( required )
*   "_fid": "Gallery FID" ( required )
*   "_editor": "Editor Object" (optional)
*   }
*
*/
cincopa.boot_gallery = function(loadObject){
..........
}

Here is example of vue component where used cincopa.boot_gallery method.

import './App.css';
import { useEffect, useRef } from 'react';
function App() {
  useEffect(()=> {
    var script = document.createElement('script');
    script.async = true;
    script.src = 'https://rtcdn.cincopa.com/libasync.js';
    var body = document.getElementsByTagName('head')[0];
    body.appendChild(script);
    script.onload = function (params) {
      window.cincopa.boot_gallery({
            _object: embedRef?.current,
            _fid: 'A4HAcLOLOO68!A0HD-jl1hBWj' 
      });
    }
  },[])
const embedRef = useRef(null);
return (
    <div className="App">
      <div ref={embedRef}>....</div>
    </div>
  );
}
​export default App;

Inline Editor

To the cincopa.boot_gallery can be passed also 3rd param with editor object and it will activate inline video editor.
To learn more about Inline Editor functionality you can check this article