Use sticky table of contents in docs

Author: Hyperkid123

packages/react-renderer-demo/package.json

@@ -46,7 +46,8 @@
         "react-ace": "^6.3.2",
         "react-copy-to-clipboard": "^5.0.1",
         "react-dom": "^16.10.2",
-        "react-router-dom": "^5.0.1"
+        "react-router-dom": "^5.0.1",
+        "react-sticky-box": "^0.8.0"
     },
     "devDependencies": {
         "@babel/cli": "^7.2.0",

packages/react-renderer-demo/src/app/src/helpers/list-of-contents.js

@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
@@ -7,6 +7,7 @@ import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import Typography from '@material-ui/core/Typography';
 import { useRouter } from 'next/router';
+import StickyBox from 'react-sticky-box';
 
 const reqSource = require.context(
   '!raw-loader!@docs/pages',
@@ -58,7 +59,6 @@ ListHeader.propTypes = {
 
 const useStyles = makeStyles(theme => ({
   fixedContainer: {
-    position: 'fixed',
     paddingLeft: 16,
   },
   listItem: {
@@ -129,23 +129,25 @@ const ListOfContents = ({ file }) => {
   const regex = /^###?#? .*/gm;
   const found = text.match(regex) || [];
   return (
-    <div className={ classes.fixedContainer }>
-      <Typography className={ classes.contentHeader } component="h3">Content</Typography>
-      <List dense>
-        { found.map(text =>(
-          <ListItem
-            onClick={ () => setActive(headerToId(text)) }
-            className={ clsx(classes.listItem, { [classes.listItemActive]: headerToId(text) === activeItem }) }
-            key={ text }
-          >
-            <ListItemText
-              className={ classes.listItemText }
-              primary={ <ListHeader text={ text } /> }
-            />
-          </ListItem>
-        )) }
-      </List>
-    </div>
+    <StickyBox offsetTop={ 96 } offsetBottom={ 20 }>
+      <div className={ classes.fixedContainer }>
+        <Typography className={ classes.contentHeader } component="h3">Content</Typography>
+        <List dense>
+          { found.map(text =>(
+            <ListItem
+              onClick={ () => setActive(headerToId(text)) }
+              className={ clsx(classes.listItem, { [classes.listItemActive]: headerToId(text) === activeItem }) }
+              key={ text }
+            >
+              <ListItemText
+                className={ classes.listItemText }
+                primary={ <ListHeader text={ text } /> }
+              />
+            </ListItem>
+          )) }
+        </List>
+      </div>
+    </StickyBox>
   );
 };
 

yarn.lock

@@ -932,7 +932,7 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.1.5", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3":
   version "7.7.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.2.tgz#111a78002a5c25fc8e3361bedc9529c696b85a6a"
   integrity sha512-JONRbXbTXc9WQE2mAZd1p0Z3DZ/6vaQIkgYMSTP3KjRCyd7rCZCcfhCyX+YjwcKxcZ82UrxbRD358bpExNgrjw==
@@ -16458,6 +16458,15 @@ react-select@^3.0.4:
     react-input-autosize "^2.2.2"
     react-transition-group "^2.2.1"
 
+react-sticky-box@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/react-sticky-box/-/react-sticky-box-0.8.0.tgz#1c191936af8f5420087b703ec6da4ef46060076c"
+  integrity sha512-al7fY+VzTKBgVrn14l21jQfhuG582Z6FD8tVbWVQDDqzcjLmUrFb+ljG2phxHhRRazg64L3yH4nOKjn78PZmag==
+  dependencies:
+    "@babel/runtime" "^7.1.5"
+    prop-types "^15.6.2"
+    resize-observer-polyfill "^1.5.1"
+
 react-test-renderer@^16.0.0-0:
   version "16.11.0"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.11.0.tgz#72574566496462c808ac449b0287a4c0a1a7d8f8"
@@ -17068,6 +17077,11 @@ reserved-words@^0.1.2:
   resolved "https://registry.yarnpkg.com/reserved-words/-/reserved-words-0.1.2.tgz#00a0940f98cd501aeaaac316411d9adc52b31ab1"
   integrity sha1-AKCUD5jNUBrqqsMWQR2a3FKzGrE=
 
+resize-observer-polyfill@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"