How to scroll to specific point on DOM using useRef()

Question

I am trying to access a specific point on DOM using useRef() from a dropdown.
at the moment I have implemented the logic using # ID but I want to use useRef().

Also to be mentioned: I don't have access to the App.js to pass the ref to other components.

dropdown.js

export default function DropDown() {
  const ScrollToTitle = (e) => {
    const title = e.target.value;
    window.location = '#' + title;
// how to access the ref in here insted of # ID?
  };
  return (
    <select onChange={ScrollToTitle}>
      <option>First </option>
      <option>Second </option>
      <option>Third </option>
      <option>Another </option>
      <option>Somthing </option>
    </select>
  );
}

I have a couple of titles on the App but as an example here is one of them:

export default function First() {

  const titleRef = useRef(); // what I wan to use

  return (
    <div id='First'>
      <h1 ref={titleRef}>First </h1> // is this correct ?
      <p>Start editing to see some magic happen :)</p>
      <p>Start editing to see some magic happen :)</p>
    </div>
  );
}

How and from where to access the titleRef?
to be mentioned again : I don't have access to the App.js to pass the ref to other components.

and I have a live example here: https://stackblitz.com/edit/react-cpezfb

Thanks a lot

Nick Vu · Accepted Answer · 2022-03-17 10:06:14Z

Your problem with useRef is you did not share the mutual states between section components and the dropdown list component, so if you want to call useRef, you need to share that with all your related components.

Here is the full implementation of how to call useRef for your case

Firstly, I used forwardRef to pass the ref to a specific element in your section components (in this case, the ref is the title element). If you don't understand what it is, you can read this doc

import React, { useRef } from 'react';

export default React.forwardRef(function First(props, ref) {
  return (
    <div id='First'>
      <h1 ref={ref}>First </h1>
      <p>Start editing to see some magic happen :)</p>
      <p>Start editing to see some magic happen :)</p>
      <p>Start editing to see some magic happen :)</p>
      <p>Start editing to see some magic happen :)</p>
      <p>Start editing to see some magic happen :)</p>
      <p>Start editing to see some magic happen :)</p>
      <p>Start editing to see some magic happen :)</p>
      <p>Start editing to see some magic happen :)</p>
      <p>Start editing to see some magic happen :)</p>
      <p>Start editing to see some magic happen :)</p>
    </div>
  );
})

And then in App.js, I defined useRef for a list of refs (not single) for all sections. I also used liftting state up technique for scrollToTitle

import React, { useRef } from 'react';
import './style.css';
import First from './components/First';
import Second from './components/Second';
import Third from './components/Third';
import Another from './components/Another';
import Somthing from './components/Somthing';
import DropDown from './components/DropDown';

export default function App() {
  const titleRefs = useRef({});
  const scrollToTitle = (e) => {
    const title = e.target.value;
    titleRefs.current[title].scrollIntoView();
  };
  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <DropDown scrollToTitle={scrollToTitle} />
      <First ref={(node) => (titleRefs.current['First'] = node)} />
      <Second ref={(node) => (titleRefs.current['Second'] = node)} />
      <Third ref={(node) => (titleRefs.current['Third'] = node)} />
      <Another ref={(node) => (titleRefs.current['Another'] = node)} />
      <Somthing ref={(node) => (titleRefs.current['Somthing'] = node)} />
    </div>
  );
}

BUT I think you used window.location = '#' + title; is not that bad. With the above implementation, your URL won't have #id to access that section directly by URL, so many of us still prefer using # instead of ref.

as I don't have access to App.js to pass the ref to other components, is there a workaround to implement it?
hmm I think it's impossible withour App.js access. Because all your components are used in App.js. If you use your components in a container component and call that container one in App.js, we can have an open path for solutions.

Houssam · Accepted Answer · 2022-03-17 10:09:33Z

1

You can scroll to an element using its ref (such as titleRef) by doing the following:

titleRef.current.scrollIntoView();

A more complete solution to your particular issue is here, where I updated your code to work for the First and Second components.

The idea is that the refs to the components you want to scroll to should be shared, thus defined in the parent. The refs should be assigned to the different components, then the dropdown can make use of them for the navigation.

Ideally, you should avoid the use of the strings "First", "Second" etc as keys and use constants for instance (by defining the values as constant such as const FIRST = "First"; then using those constants so that your code is easier to maintain.

edited Mar 17, 2022 at 10:09

answered Mar 17, 2022 at 9:16

Houssam

1,8751 gold badge7 silver badges24 bronze badges

5 Comments

Kim-Jun-Un Over a year ago

should I add this in dropdown.js?

Houssam Over a year ago

My bad, I assumed that all of your code is within the same component, since your Dropdown needs access to the ref. I have updated your code to have the refs in the parent component of both the Dropdown and the other components (First, Second, etc...) and made it work for First and second as a example: stackblitz.com/edit/react-ycwepv

Houssam Over a year ago

I will update my answer with the link and a little explanation of what I changed

Kim-Jun-Un Over a year ago

Although your answer is correct, in my case, I don't have access to App.js to pass the ref to other components. Do you think there is any workaround for that?

Houssam Over a year ago

Another approach would be to use some state within your app, if you have access to that, such as a Context to have the refs accessible to all the components. Otherwise, using the the anchor links that you initially tried is a very good solution if you are constrained, an improvement would be to use constants for the values so you don't need to worry about the links breaking if a value doesn't match.

Collectives™ on Stack Overflow

How to scroll to specific point on DOM using useRef()

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related