KPC
Kevin Powell - Community•2y ago
Å Marlon G

Adding id to element on scroll using react hooks useInView and useID in nextjs.13

Right ... so the title might be a bit daunting, but I think this is actually just some plain JS at the end of it. But I'm stuck here now ... In this code you see two react hooks, useInView and useID, being used to listen for scroll behaviour and adding an id to an element: 
import { useInView } from 'react-intersection-observer';
import { useId } from 'react';

export const FrontPage = () => {
  // Intersection observer hook
  const { ref: myRef, inView: elementIsVisible } = useInView();
  console.log('elementIsVisible', elementIsVisible);

  const newId = useId();

  return (
    <>
      <section className={styles.mainInfo}>
        <div id={newId} className={styles.mainInfoContent}>
          <HeadingOne content='Magefølelsen' />

          <HeadingTwo content='Kommunikasjon & design' />

          <EmailAddress content='[email protected]' />
        </div>
      </section>

      <section className={styles.shallWeWorkTogether}>
        <div className={styles.shallWeTitle}>
          <HeadingThree content='Skal vi jobbe sammen?' />
        </div>

        <div className={styles.shallWeContent} ref={myRef}>
          <div>
            <BodyText
              content='Er du enig i at for å kunne lage en fortelling og et design må man
            ha en god idé og historie?'
            />
            <NoddingWoman />
          </div>
import { useInView } from 'react-intersection-observer';
import { useId } from 'react';

export const FrontPage = () => {
  // Intersection observer hook
  const { ref: myRef, inView: elementIsVisible } = useInView();
  console.log('elementIsVisible', elementIsVisible);

  const newId = useId();

  return (
    <>
      <section className={styles.mainInfo}>
        <div id={newId} className={styles.mainInfoContent}>
          <HeadingOne content='Magefølelsen' />

          <HeadingTwo content='Kommunikasjon & design' />

          <EmailAddress content='[email protected]' />
        </div>
      </section>

      <section className={styles.shallWeWorkTogether}>
        <div className={styles.shallWeTitle}>
          <HeadingThree content='Skal vi jobbe sammen?' />
        </div>

        <div className={styles.shallWeContent} ref={myRef}>
          <div>
            <BodyText
              content='Er du enig i at for å kunne lage en fortelling og et design må man
            ha en god idé og historie?'
            />
            <NoddingWoman />
          </div>
... this is not all of the code. The entire react component can be seen here: https://github.com/AMarlonG/Website/blob/main/web-app/PageComponents/FrontPage.tsx
12 Replies
Å Marlon G
Å Marlon GOP•2y ago
Now, what I want is: When elementIsVisible equals true, I want the newId to be added to the element. When elementIsVisible equals false, I want neId to be removed from the element. In other words – when .shallWeWorkContent is visible, I want .mainInfoContent to get an id attribute from newId. I've tried using this video to solve it, but I'm banging my head against the wall here. Do I have to use an if statement or not? https://www.youtube.com/watch?v=V-CBdlfCPic
Å Marlon G
Å Marlon GOP•2y ago
I've made the elementIsVisible work correctly:
Å Marlon G
Å Marlon GOP•2y ago
And the useId is adding a (weird looking) id attribute to the element I want:
Rook
Rook•2y ago
useId generates a unique id, which is where that's coming from
Å Marlon G
Å Marlon GOP•2y ago
Yep! I know, and I used a while to make it work, but what's the solution to the big question. You know?
Rook
Rook•2y ago
Just to clarify, you want .mainInfoContent to only get the newId if elementIsVisible, right? If so, you can probably just do something like <div id={elementIsVisible ? newId : ''} className={styles.mainInfoContent}>
Å Marlon G
Å Marlon GOP•2y ago
Jeez! That was easy! I was trying several different if statements and got nowhere ... Haha! I love how JS sometimes is so simple! ... follow up question: in the useId docs I can't find out how to make a custom id, and not that weird looking number. https://react.dev/reference/react/useId It would be good to have an id name that is more logical like scrolling or whatever ...
Rook
Rook•2y ago
The solution is just to not use useId I think lollll I'd actually never heard of that hook until today something like this then: <div id={elementIsVisible ? 'scrolling' : ''} className={styles.mainInfoContent}>
Å Marlon G
Å Marlon GOP•2y ago
You're friggin kidding me!!!! Hahahahahahahhaha!!!! This is the smoothest way I've seen on the internet to ad an attribute ... I've been googling for days, and it's this simple! I always give out a peacock to the best answer of the day, but you just earned a life supply of them!
Rook
Rook•2y ago
:) glad i could help!
Å Marlon G
Å Marlon GOP•2y ago
Å Marlon G
Å Marlon GOP•2y ago
Thank you so much! Have a great day! 🫡

Did you find this page helpful?