search

rafgraph / react-router-hash-link

Hash link scroll functionality for React Router
https://react-router-hash-link.rafgraph.dev
MIT License
732 stars 62 forks source link

Apply and remove active class and styling on NavHashLink when sections come into view #85

Closed ruru-ink closed 3 years ago

ruru-ink commented 3 years ago

Using section two of the demo as an example, the link gets active styling when clicked on or page refreshed. This behaviour is as I'd expect.

When the user scrolls down or up, the active styling on the "Section Two NavHashLink" link sticks, it's not removed. I would expect that link too revert back to the default styling.

As you scroll down to "Section Three", I would expect the "Section Three NavHashLink" link to automatically get the activeClassName and activeStyle applied then reverted back to the default styling as I scroll back up.

rafgraph commented 3 years ago

Hi @ruru-ink, currently this is out of scope, see https://github.com/rafgraph/react-router-hash-link/issues/79#issuecomment-832369052. If you implement it yourself with history.push(...), the active className and style will update when the hash changes.

I'd be interested in exploring adding this if someone wants to work on it, but there are a lot of edge cases (when there are multiple elements showing which one is active, etc) that make a good generic solution hard to design. If you're interested, please start a new issue with some ideas for how to implement it.

ruru-ink commented 3 years ago

Fair enough.

If anyone comes across this and needs this behaviour, I've forked the demo and added the functionality using useInView within the react-intersection-observer package.

https://codesandbox.io/s/distracted-perlman-j4c5k