Closed ruru-ink closed 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.
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.
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.