DEV Community: Asiakajoy42

Create a table of contents with highlighting in React

Asiakajoy42 — Wed, 15 Nov 2023 19:10:29 +0000

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 aTableOfContent.jsfile and a tableOfContent.css file in the src directory. Add the following lines of code to the TableOfContent.js file:

// src/TableOfContent.js
import './tableOfContent.css'

function TableOfContent() {
  return (
    <nav>
      <ul>
        <li>
          <a href='#'>A heading</a>
        </li>
      </ul>
    </nav>
  )
}
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 <nav> with an unordered list <ul> containing a single list item <li> with a placeholder anchor <a> link to "A heading" (represented by '#'). The component is exported for use in other files.

Next, add the following lines of code in the tableOfContent.css file:

// src/tableOfContent.css
nav {
  width: 220px;
  min-width: 220px;
  padding: 16px;
  align-self: flex-start;
  position: -webkit-sticky;
  position: sticky;
  top: 48px;
  max-height: calc(100vh - 70px);
  overflow: auto;
  margin-top: 150px;
}

nav ul li {
  margin-bottom: 15px;
}

To display this component, navigate to the App.js file and insert the following import:

import TableOfContent from './TableOfContent';

Next, modify the App component to look like the following:

// src/App.js
function App() {
  return (
    <div className="wrapper">
      <Content />
      <TableOfContent />
    </div>
  );
}

With the code above, we'll see a sticky component on the right side of our app.

Find the headings on the page

We can use the querySelectorAll document method to locate all of the headers on our page, which returns a NodeList containing a list of items that match the supplied collection of selectors.

The following example demonstrates how to utilize the querySelectorAll method:

const headings = document.querySelectorAll(h2, h3, h4);

The code above will select all

,

, and

elements in the DOM and store them in the headings variable as a NodeList, which is similar to an array and contains references to the selected elements.

Now, in the TableOfContent.js file, add the following import to find the headings:

import { useEffect, useState } from 'react';

Next, in the component, add the following lines of code before the return statement:

// src/TableOfContent.js
const [headings, setHeadings] = useState([])

useEffect(() => {
  const elements = Array.from(document.querySelectorAll("h2, h3, h4"))
    .map((elem) => ({
      text: elem.innerText,
    }))
  setHeadings(elements)
}, [])

In the given code above, the React functional component TableOfContent uses the useState and useEffect hooks. It initializes a state variable headings as an empty array and sets it using setHeadings within the useEffect hook. The useEffect hook runs once when the component mounts (empty dependency array []). It selects all

,

, and

elements from the DOM, converts them to an array, extracts their inner text, and stores the resulting array of objects with text content in the headings state variable.

Now, to display the headings in the TOC, modify the return statement of the component to look like the following code:

// src/TableOfContent.js
return (
  <nav>
    <ul>
      {headings.map(heading => (
        <li key={heading.text}>
          <a href='#'>{heading.text}</a>
        &lt;/li>
      ))}
    </ul>
  </nav>

The code above returns a table of contents within a navigation () element, using the headings state. It maps through the headings array, creating list items (

) for each heading. Each list item contains an anchor () link with the heading text, represented by heading.text. The key attribute is set to the heading text to provide a unique identifier for each list item.

Link and listing heading in hierarchy

Headings do the important work of showing the structure of digital content. They help all users understand and navigate your digital content more easily, including those with disabilities.

When we click on a heading in the TOC, we are not taken to the appropriate section. You'll see that they're all in the same line, with no indication of which is the main heading and which is a subheading. Let's get things sorted out.

In the TableOfContent component, modify the useEffect Hook to look like the following code:

// src/TableOfContent.js
useEffect(() => {
  const elements = Array.from(document.querySelectorAll("h2, h3, h4"))
    .map((elem) => ({
      id: elem.id,
      text: elem.innerText,
      level: Number(elem.nodeName.charAt(1))
    }))
  setHeadings(elements)
}, [])

In addition to the text from the headings, we are adding an ID and a level property to the state. We'll provide the ID to the TOC text's anchor tag so that when we click on it, we'll be directed to the appropriate portion of the page. The level property will then be used to establish a hierarchy in the TOC.

Modify the ul element in the TableOfContent component's return statement to look like this:

// src/TableOfContent.js
<ul>
  {headings.map(heading => (
    <li
      key={heading.id}
      className={getClassName(heading.level)}
      >
      <a
        href={`#${heading.id}`}
        onClick={(e) => {
          e.preventDefault()
          document.querySelector(`#${heading.id}`).scrollIntoView({
            behavior: "smooth"
          })}}
        >
        {heading.text}
      </a>
    </li>
  ))}
</ul>

The code above returns an unordered list <ul> representing a dynamic table of contents. It maps through the headings array, creating list items <li> for each heading. Each list item contains an anchor <a> link with the heading text, which, when clicked, smoothly scrolls to the corresponding element with the specified heading.id in the document.

The key attribute is set to heading.id to provide a unique identifier for each list item. The className attribute is set using the getClassName function, which assigns a class based on the** heading.level** value.

Next, to create the getClassName function, add the following code outside the TableOfContent component:

// src/TableOfContent.js
const getClassName = (level) => {
  switch (level) {
    case 2:
      return 'head2'
    case 3:
      return 'head3'
    case 4:
      return 'head4'
    default:
      return null
  }
}

The getClassName function takes a level parameter and returns a corresponding class name based on the level value. If level is 2, it returns 'head2'; if 3, it returns 'head3'; if 4, it returns 'head4'; otherwise, it returns null.

Now, add the following lines of code in the in tableOfContent.css file:

// src/tableOfContent.css
.head3{
  margin-left: 10px;
  list-style-type: circle;
}
.head4{
  margin-left: 20px;
  list-style-type: square;
}

Observing active headings with the Intersection Observer API

API to detect the visibility allows us to monitor a target element and execute a function when it reaches a predefined point.

Using the Intersection Observer API, we'll write a custom Hook that returns the active header's ID. The ID returned will then be used to highlight the matching text in our TOC.

To do so, create a hook.js file in the src directory and add the following lines of code:

// src/hooks.js
import { useEffect, useState, useRef } from 'react';

export function useHeadsObserver() {
  const observer = useRef()
  const [activeId, setActiveId] = useState('')

  useEffect(() => {
    const handleObsever = (entries) => {}

    observer.current = new IntersectionObserver(handleObsever, {
      rootMargin: "-20% 0% -35% 0px"}
    )

    return () => observer.current?.disconnect()
  }, [])

  return {activeId}
}

ChatGPT
The code above defines a custom React hook useHeadsObserver, which uses IntersectionObserver to observe elements on the page. It initializes observer and activeId as a ref and state variable, respectively, using useRef and useState.

The useEffect hook sets up the IntersectionObserver with handleObserver as the callback function. The observer is configured to have a rootMargin of "-20% 0% -35% 0px", which adjusts the observation area. The returned function disconnects the observer when the component unmounts.

Finally, the hook returns an object with the activeId, which represents the ID of the currently intersecting element (the element currently in the viewport or within the specified rootMargin area).

Let's specify the heads we wish to monitor by supplying them to the Intersection Observer's observe method. We'll also change the handleObsever callback method to save the intersected header's ID in the state.

To do so, modify the useEffect Hook to look like the code below:

// src/hooks.js
useEffect(() => {
  const handleObsever = (entries) => {
    entries.forEach((entry) => {
      if (entry?.isIntersecting) {
        setActiveId(entry.target.id)
      }
    })
  }

  observer.current = new IntersectionObserver(handleObsever, {
    rootMargin: "-20% 0% -35% 0px"}
  )

  const elements = document.querySelectorAll("h2, h3", "h4")
  elements.forEach((elem) => observer.current.observe(elem))
  return () => observer.current?.disconnect()
}, [])

looking at the code above, useEffect hook sets up an IntersectionObserver to observe specified elements on the page (h2, h3, and h4). When an observed element becomes intersecting with the viewport or within the specified rootMargin, its ID is set as the activeId state variable. The observer is disconnected when the component unmounts.

In the TableOfContent.js file, import the created Hook with the following code:

// src/TableOfContent.js
import { useHeadsObserver } from './hooks'

Now, call the Hook after the headings state in the TableOfContent component:

// src/TableOfContent.js
const {activeId} = useHeadsObserver()

When a heading element crosses with the code above, it will be available with activeId.

Highlighting the active heading

To highlight the active headings in our TOC, modify the anchor tag of the li element in the returned statement of the TableOfContent component by adding the following style attribute:

style={{
  fontWeight: activeId === heading.id ? "bold" : "normal" 
}}

Now, our anchor tag will look like this:

// src/TableOfContent.js
<a
  href={`#${heading.id}`} 
  onClick={(e) => {
    e.preventDefault()
    document.querySelector(`#${heading.id}`).scrollIntoView({
      behavior: "smooth"
    })}}
    style={{
      fontWeight: activeId === heading.id ? "bold" : "normal" 
    }}
  >
  {heading.text}
</a>

from the code above we creates an anchor <a>element for each heading, where heading.id is used in the href attribute. When clicked, it smoothly scrolls to the corresponding element. The style attribute sets the fontWeight to "bold" if activeId matches heading.id, otherwise, it's set to "normal". The heading.text is displayed as the link text.
By following these steps, you can create a functional and interactive table of contents in your React application. The table of contents will automatically update based on the content on the page and highlight the active section as the user scrolls. This navigation feature provides an intuitive way for users to navigate lengthy documents or articles with ease.

Conclusion

In this tutorial, We learned how to make a table of contents with item highlighting to signify each active header, assisting people in navigating your site and enhancing overall UX.

Different Ways to Write CSS in React

Asiakajoy42 — Wed, 15 Nov 2023 19:06:19 +0000

Styling is an important part of designing engaging user interfaces in React apps. While there are several approaches to writing CSS in React, selecting the appropriate one can have a big impact on the maintainability and scalability of your project. In this article, we will look at various approaches for styling React components and analyze their benefits and drawbacks.

Inline Styling

Inline styling involves adding CSS directly to the JSX elements within a component using the style attribute.

This is a very simple example of inline style in React:

const MyComponent = () => {
  const myStyle = {
    color: 'blue',
    fontSize: '16px',
    fontWeight: 'bold',
  };

  return (
    <div style={myStyle}>
      This text is styled using inline CSS.
    </div>
  );
};

Pros:

Styles can be applied directly to particular elements.
Styles can be changed dynamically based on status or props.

Cons:

This violates the idea of separation of concerns.
Complex styles are very difficult to manage and maintain.
Code duplication and limited reusability.

CSS Modules

CSS Modules provide a way to locally scope CSS in React components. Each CSS file is transformed into a unique class name, ensuring that styles only affect the specific component.

The beautiful thing about CSS modules is that they work with both SASS and regular CSS. Additionally, Create React App users can start using CSS modules right away with no setup required.

A CSS Module stylesheet is similar to a regular stylesheet, only with a different extension (e.g. styles.module.css). Here’s how they’re set up:

Make a file with the extension ".module.css."
Import the module into the React application, as we previously saw.
Add a className to an element or component and reference the particular style from the imported styles.

/* styles.module.css */
.myComponent {
  color: red;
  font-size: 18px;
}
import styles from './styles.module.css';

const MyComponent = () => {
  return (
    <div className={styles.myComponent}>
      This text is styled using CSS Modules.
    </div>
  );
};

Pros:

Local scoping prevents styles from affecting other components.
makes it possible to use conventional CSS syntax and functionalities.
provides a tidy and well-organized style method.

Cons:

It Can cause the amount of CSS files to rise.
Name conflicts in bigger projects are still a possibility.

Styled Components

Styled Components is a third-party toolkit that enables you to create reusable custom HTML components with specified CSS properties and use them anywhere you choose inside your project. For more info vist

The core of this library is a new feature called template literal that was added in ES6 version and lets you design your own string interpolation rules. To generate Styled Components, utilize this template literal together with CSS.
Here is an example:

import styled from 'styled-components';

const StyledDiv = styled.div`
  color: green;
  font-size: 20px;
`;

const MyComponent = () => {
  return (
    <StyledDiv>
      This text is styled using Styled Components.
    </StyledDiv>
  );
};

Pros:

Promotes component-focused authoring techniques.
Creative styling with props.
Handles vendor prefixing automatically.

Cons:

Requires the installation of an additional library.
Developers that are unfamiliar with CSS-in-JS may have a learning curve.

CSS-in-JS Libraries

CSS-in-JS has accomplished something similar with CSS, just like React enabled us to write HTML as JavaScript using JSX.

We can write CSS styles directly in the javascript (.js) files for our components thanks to CSS-in-JS.

Not only can you create CSS style rules without creating a single.css file, but these styles may also be applied to specific components.

CSS-in-JS has accomplished something similar with CSS, just like React enabled us to write HTML as JavaScript using JSX.

We can write CSS styles directly in the javascript (.js) files for our components thanks to CSS-in-JS.

Not only can you create CSS style rules without creating a single.css file, but these styles may also be applied to specific components.

import styled from "styled-components";

const Button = styled.button`
  color: limegreen;
  border: 2px solid limegreen;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;

  &:hover {
    opacity: 0.9;
  }
`;

export default function App() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}

Pros:

built-in theming support, making it convenient to switch between different visual themes in the application.
Some libraries handle vendor prefixing automatically
Server-Side Rendering (SSR) Friendly.

Cons:

Adoption of CSS-in-JS may need developers learning new syntax and concepts, which might be difficult for those already familiar with traditional CSS.
speed Overhead: Some CSS-in-JS solutions may incur a little speed hit as a result of additional JavaScript processing required to apply styles dynamically.
Bundle Size Increase: CSS-in-JS libraries frequently include extra runtime code in the bundle, potentially raising the overall bundle size.

TailwindCSS

TailwindCSS is another popular option to include CSS in your React project.

It is a utility-first CSS framework for rapidly building custom user interfaces. Here you can easily build modern websites without ever leaving your HTML.

Since TailwindCSS provides utility-first CSS classes, you won’t be working with CSS directly but instead interacting with the predefined Tailwind classes. To reduce bundle sizes, it purges unused classes so you only ship the CSS you need.

For example, you can use “m-2.5” to add a margin of 10px across the top, bottom, right, and left. In the same way, you can use “p-2.5” to add padding of 10px to every direction.

function App() {
  return (
    <div className="m-2.5">
      <h1>Hello</h1>
    </div>
  );
}
export default App;

Pros

Responsive Design: Tailwind CSS includes responsive design utilities, making it easy to build responsive layouts that adapt to various screen sizes without the need for writing custom media queries.
Small Bundle Size: Tailwind CSS is designed to be highly optimized, and by using only the utility classes needed.
Community and Ecosystem: Tailwind CSS has a large and active community, which means extensive documentation, tutorials, and community-built plugins, making it easier to find support and resources.

Cons:

Learning Curve: Tailwind CSS introduces a unique set of utility classes, which can have a steep learning curve for developers accustomed to traditional CSS frameworks.
CSS Bloat: In larger projects, using many utility classes may lead to a significant increase in the size of the generated CSS, which can impact page load times.
Limited Creativity: Relying heavily on utility classes might restrict the creativity and customization of styles, leading to a somewhat uniform design across projects.

Conclusion

In this article we looked at a few alternative approaches to writing styles in a React application. And it's not as though one is superior to the others; the method you choose is determined by the circumstances. Hopefully, you now have a decent understanding of them and are aware that you have a plethora of tools in your React styling armory.