Kevin Powell - Community•11mo ago

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='hei@magefolelsen.no' />
        </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='hei@magefolelsen.no' />
        </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•11mo 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•11mo ago

I've made the elementIsVisible work correctly:

Å Marlon G•11mo ago

And the useId is adding a (weird looking) id attribute to the element I want:

Rook•11mo ago

useId generates a unique id, which is where that's coming from

Å Marlon G•11mo 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•11mo 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•11mo 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•11mo 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•11mo 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•11mo ago

:) glad i could help!

Å Marlon G•11mo ago

https://tenor.com/view/peacock-life-in-color-with-david-attenborough-dancing-mating-ritual-seducing-gif-21162087

Tenor

Å Marlon G•11mo ago

Thank you so much! Have a great day! 🫡

Gaming

Programming

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