integrated html2canvas and jsPDF to generate PDFs

src/components/App/App.js

@@ -1,23 +1,31 @@
-import React, { useEffect, useContext, Suspense } from 'react';
+import React, { useRef, useEffect, useContext, Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import AppContext from '../../context/AppContext';
+import PageContext from '../../context/PageContext';
+
 import LeftSidebar from '../LeftSidebar/LeftSidebar';
 import RightSidebar from '../RightSidebar/RightSidebar';
 
 import templates from '../../templates';
 
 const App = () => {
+  const pageRef = useRef(null);
   const { i18n } = useTranslation();
+
   const context = useContext(AppContext);
   const { state, dispatch } = context;
   const { theme, settings } = state;
 
+  const pageContext = useContext(PageContext);
+  const { setPageElement } = pageContext;
+
   useEffect(() => {
+    setPageElement(pageRef);
     i18n.changeLanguage(settings.language);
     const storedState = JSON.parse(localStorage.getItem('state'));
     dispatch({ type: 'import_data', payload: storedState });
-  }, [dispatch, i18n, settings.language]);
+  }, [dispatch, setPageElement, i18n, settings.language]);
 
   return (
     <Suspense fallback="Loading...">
@@ -25,11 +33,7 @@ const App = () => {
         <LeftSidebar />
 
         <div className="z-0 h-screen col-span-3 flex justify-center items-center overflow-scroll">
-          <div
-            id="page"
-            className="animated fadeIn my-auto shadow-2xl"
-            style={{ animationDelay: '500ms' }}
-          >
+          <div id="page" ref={pageRef} className="my-auto shadow-2xl">
             {templates.find(x => theme.layout.toLowerCase() === x.key).component()}
           </div>
         </div>