How to update URL on page scroll without hooks in react?

Question

I am trying to create a smooth scrolling page in React. The page is split into 4 sections:

Overview

About us

Courses

News

So on scrolling, if it's at the section 'News' with the id=news the URL should be updated to: website.com/specific-string#news so he can copy this link, and when you access this URL to send you directly to that section.

I am using react version 16.3.1. So cannot use hooks here.

After adding this smooth scroll feature, I need to display a button which will download the content in the section in the viewport. I am new to react and trying to learn new things by challenging myself everyday. Anyone who could guide me here?

I want to explore the possibilities with class based components. — Gareema
– Gareema, Commented Feb 7, 2023 at 13:46
Then you could achieve that with just javascript, you can check if an element is inside the viewport and manipulate whatever when it happens. I remember doing something similar with the help from this post — derFrosty
– derFrosty, Commented Feb 7, 2023 at 14:01

Oki · Accepted Answer · 2023-02-07 14:43:15Z

0

window.location.hash = element.id  // here is the element id

Or like this if you do not want to scroll to the element

history.pushState({}, "", element.id)

You can update your location hash like this.

If you don't know how to get the element id, you can use IntersectionObserver

It all can be done without hooks

edited Feb 7, 2023 at 14:43

answered Feb 7, 2023 at 14:38

Oki

3,3652 gold badges12 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

harshil.babariya · Accepted Answer · 2024-04-18 11:57:22Z

0

For Download function and scroll handling, You can add below function to your code:

const handleDownload = () => {
  const currentSection = window.location.hash.substr(1);
  const element = document.getElementById(currentSection);
};

// For Scroll functionality
handleScroll = () => {
    const sections = ['overview', 'about', 'courses', 'news'];
    const scrollPosition = window.scrollY;

    sections.forEach(section => {
      const element = document.getElementById(section);
      if (element) {
        const { top, bottom } = element.getBoundingClientRect();
        if (top <= 0 && bottom >= 0) {
          window.history.replaceState(null, '', `#${section}`);
        }
      }
    });
  };

edited Apr 18, 2024 at 11:57

answered Apr 18, 2024 at 11:54

harshil.babariya

13 bronze badges

Collectives™ on Stack Overflow

How to update URL on page scroll without hooks in react?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related