A table of contents summarizes the page's content, allowing site visitors to swiftly move to portions of the page by clicking on the desired heading. Tables of contents are commonly used in manuals and blogs. This component will dynamically render a list of page headings and highlight which heading you are currently viewing. In this article, we'll look at how to make a sticky table of contents that dynamically lists the available headings on a page, emphasizing the active headings. As we read our article, when a heading appears on the screen, it will be highlighted in the TOC, as shown in the animation below: ## prerequisite - Node.js installed on your system. - Basic understanding of react js. ## Setting up React - Open a terminal(Windows Command Prompt or PowerShell). - Create a new project folder: mkdir ReactProjects and enter that directory: cd ReactProjects. - Install React using create-react-app, a tool that installs all of the dependencies to build and run a full React.js application: `npx create-react-app my-app npm start // to start react ` ## Create a Table of Content Component (TOC) Our TOC component will be placed on the right side of our screen, so let's start by designing it. first create a` TableOfContent.js `file and a `tableOfContent.css` file in the src directory. Add the following lines of code to the `TableOfContent.js` file: ```javascript // src/TableOfContent.js import './tableOfContent.css' function TableOfContent() { return ( ) } export default TableOfContent ``` From code above we imports a CSS file named `tableOfContent.css`. It defines a React functional component called TableOfContent that renders a navigation bar `

christianah5

Create a table of contents with highlighting in React

Join Our Newsletter. No Spam, Only the good stuff.