How to Create a Scroll Tracking Table of Content in Gatsby?
Tutorial on making an article outline responsive to your scrolling using react-scrollspy
Have you visited some documentation and tutorial sites, that allow you to see which section are you reading on the side? If you want to improve the readability of your Gatsby website. In this article, I will share my process in creating an interactive table of content component that can respond to your scrolling.
Let’s take a look at the requirement: 1. Reader will be able to navigate section of content easily 2. Reader will be able to know their reading progress
We will be using a package called react-scrollspy to detect if the headings are in viewport, which will trigger an active class name in return.
By including a Table of Content component, users will be able to navigate within your article easily, finding the content they are interested. Let’s get started and skip to step 2 if you have a Gatsby site already.
1. Create a Gatsby Site
We will install a simple MDX starter at the beginning
gatsby new gatsby-tutorial-table-of-content https://github.com/hagnerd/gatsby-starter-blog-mdxUse yarn or npm install to initialise the repository.
