Updates the documentation to include information on how to customize the popup root

docs/docs/get-started.mdx

@@ -69,4 +69,34 @@ const PopupExample = () => (
 );
 ```
 
+## Custom Root
+
+Starting from v2 you can customize where the popup is rendered on the page!
+
+By default a div with id `popup-root` is appended to the very end of the `body` tag and the popup content is rendered inside, but if an element with this id already exists, this will be used instead.
+
+This can be helpful when you need your popup to render inside of React's root element.
+
+```jsx
+const PopupExample = () => (
+  <Popup trigger={<button>Trigger</button>} position="top left">
+    {close => (
+      <div>
+        Content here
+        <a className="close" onClick={close}>
+          &times;
+        </a>
+      </div>
+    )}
+  </Popup>
+);
+
+const App = () => (
+  <div>
+    <PopupExample />
+    <div id="popup-root" />
+  </div>
+);
+```
+
 > More examples in [Guides Section](./tooltip-examples.mdx)

docs/docusaurus.config.js

@@ -1,3 +1,6 @@
+const lightCodeTheme = require('prism-react-renderer/themes/github');
+const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+
 module.exports = {
   title: 'ReactJs Popup: Modals, Tooltips and Menus, All in One ',
   tagline:
@@ -20,6 +23,10 @@ module.exports = {
       content:
         '⭐️ If you like reactjs-popup, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/yjose/reactjs-popup/stargazers">GitHub!</a>  ⭐️ ',
     },
+    prism: {
+      theme: lightCodeTheme,
+      darkTheme: darkCodeTheme,
+    },
     navbar: {
       title: 'Reactjs-popup',
       logo: {
@@ -67,13 +74,12 @@ module.exports = {
           showReadingTime: true,
           // Please change this to your repo.
           editUrl:
-            'https://github.com/yjose/reactjs-popup/edit/master/docs/blog/',
+            'https://github.com/yjose/reactjs-popup/edit/master/docs/docs/',
         },
         theme: {
           customCss: require.resolve('./src/css/custom.css'),
         },
         sitemap: {
-          cacheTime: 600 * 1000, // 600 sec - cache purge period
           changefreq: 'weekly',
           priority: 0.5,
         },

docs/package.json

@@ -11,9 +11,9 @@
     "serve": "docusaurus serve"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.0.0-alpha.62",
-    "@docusaurus/preset-classic": "^2.0.0-alpha.62",
-    "@mdx-js/react": "^1.5.8",
+    "@docusaurus/core": "^2.0.0-beta.3",
+    "@docusaurus/preset-classic": "^2.0.0-beta.3",
+    "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
@@ -32,7 +32,7 @@
     ]
   },
   "devDependencies": {
-    "@docusaurus/plugin-google-analytics": "^2.0.0-alpha.37",
-    "@docusaurus/plugin-sitemap": "^2.0.0-alpha.37"
+    "@docusaurus/plugin-google-analytics": "^2.0.0-beta.3",
+    "@docusaurus/plugin-sitemap": "^2.0.0-beta.3"
   }
 }

docs/src/theme/TOC/index.js

@@ -4,21 +4,22 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 import React from 'react';
+import clsx from 'clsx';
 import useTOCHighlight from '@theme/hooks/useTOCHighlight';
 import styles from './styles.module.css';
 import Ads from '../../components/Ads';
 
 const LINK_CLASS_NAME = 'table-of-contents__link';
 const ACTIVE_LINK_CLASS_NAME = 'table-of-contents__link--active';
 const TOP_OFFSET = 100;
-/* eslint-disable jsx-a11y/control-has-associated-label */
 
-function Headings({ headings, isChild }) {
-  if (!headings.length) {
+/* eslint-disable jsx-a11y/control-has-associated-label */
+function Headings({ toc, isChild }) {
+  if (!toc.length) {
     return null;
   }
-
   return (
     <>
       <Ads />
@@ -27,29 +28,28 @@ function Headings({ headings, isChild }) {
           isChild ? '' : 'table-of-contents table-of-contents__left-border'
         }
       >
-        {headings.map(heading => (
+        {toc.map(heading => (
           <li key={heading.id}>
             <a
               href={`#${heading.id}`}
-              className={LINK_CLASS_NAME} // Developer provided the HTML, so assume it's safe.
+              className={LINK_CLASS_NAME}
+              // Developer provided the HTML, so assume it's safe.
               // eslint-disable-next-line react/no-danger
-              dangerouslySetInnerHTML={{
-                __html: heading.value,
-              }}
+              dangerouslySetInnerHTML={{ __html: heading.value }}
             />
-            <Headings isChild headings={heading.children} />
+            <Headings isChild toc={heading.children} />
           </li>
         ))}
       </ul>
     </>
   );
 }
 
-function TOC({ headings }) {
+function TOC({ toc }) {
   useTOCHighlight(LINK_CLASS_NAME, ACTIVE_LINK_CLASS_NAME, TOP_OFFSET);
   return (
-    <div className={styles.tableOfContents}>
-      <Headings headings={headings} />
+    <div className={clsx(styles.tableOfContents, 'thin-scrollbar')}>
+      <Headings toc={toc} />
     </div>
   );
 }

docs/src/theme/TOC/styles.module.css

@@ -13,24 +13,6 @@
   top: calc(var(--ifm-navbar-height) + 2rem);
 }
 
-.tableOfContents::-webkit-scrollbar {
-  width: 7px;
-}
-
-.tableOfContents::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 10px;
-}
-
-.tableOfContents::-webkit-scrollbar-thumb {
-  background: #888;
-  border-radius: 10px;
-}
-
-.tableOfContents::-webkit-scrollbar-thumb:hover {
-  background: #555;
-}
-
 @media only screen and (max-width: 996px) {
   .tableOfContents {
     display: none;
@@ -40,4 +22,3 @@
     padding: 0 0.3rem;
   }
 }
-