activeClass

[Ali-Hussein-dev]

activeClass property does not work in tailwindcss with utility classes is there a workaround to get it worked?

[naufaldi]

i have same issues. But, still dont understand. How tailwindcss can influence react-scroll?

[fisshy]

Could you provide a codepen/plunkr demonstrating the issue? Would be easier for me.

[lerrua]

@fisshy same issue here, also using tailwindcss. I have no warnings, no console errors, but the activeClass doesn't show on click navigation.

[botond-veress]

I have the same issue with Nextjs (without tailwindcss). None of the activeClass gets applied in my project.

[saaymeen]

I have the same issue with Nextjs (without tailwindcss). None of the activeClass gets applied in my project.

Any chance you forgot to apply the spy and/or hashSpy prop depending on your needs? I remember having similar issues when I first started using the library without reading the docs.

[joshmrallen]

Hi fisshy, my problem is probably a bit more basic.

the first link shows the activeClass styling, but the other links don't. See attached images of code and result.

Am I perhaps not using the props correctly?

Is this

[deicidemilan]

I think my problem is similar. All link work if top of page is near. But I need it always. In my example on my last three item active never apply.

This is little bit stupid. I want active class on click can I get this out of box?

[fisshy]

I'm pretty sure that it should work. What browser are you using?

[fisshy]

I'm not sure how that rest of the code looks like. But this "basic" setup works for me, when it comes to Link/activeClass.

https://codesandbox.io/s/basic-6t84k

[isopen]

wrap scroll content in <Element name = '...' />

[tung-eh]

I found a better way to do it by using IntersectionObserver API.

This is the example code for the custom Link:

const NavLink = ({ to, text, ...props }) => {
  const [active, setActive] = useState(false)

  useEffect(() => {
    const ioOptions = {
      threshold: 0.5,
    }
    const ioCallback = (entries, observer) => {
      const entry = entries[0]
      setActive(entry.isIntersecting)
    }

    const observer = new IntersectionObserver(ioCallback, ioOptions)
    observer.observe(document.querySelector(`#${to}`))
  }, [to])

  return (
    <ScrollLink
      className={`cursor-pointer hover:text-green-500 p-2 ${
        active ? 'border-b-2 border-green-500' : ''
      }`}
      smooth
      offset={-80}
      to={to}
      {...props}
    >
      {text}
    </ScrollLink>
  )
}

Basically, the idea is only use react-scroll for smooth-scroll effect, and use IntersectionObserver to detect the active section.

Note: I don't know why but it's not working with react-scroll <Element name={id} />, using <div id={id} /> instead.