search

gabergg / react-scrollable-anchor

Smooth scrolling anchors bound to URL hash
MIT License
291 stars 89 forks source link

Doesn't work with react-bootstrap #10

Open heyjas0n opened 7 years ago

heyjas0n commented 7 years ago

Tried to use it with react-bootstrap's navigation bar, doesn't seem to work.

Hewlbern commented 7 years ago

I also can't get it to work with react-bootstrap's nav bar! I thought I was just making a mistake somewhere, glad to see someone else has the same issue.

bbortt commented 7 years ago

Hi guys It works of course. You can use import {goToAnchor} from 'react-scrollable-anchor' with the id of the required section. Use an #onClick()-listener and prevent the default reload with event#preventDefault().

jpbufe3 commented 7 years ago

@bbortt - the problem with that solution is when the nav bar is taking you to a new page then you can't prevent the default or just use goToAnchor since the element won't be on the page yet. Am I missing something? A workaround could be to have a listener on page load to inspect the hash and then use goToAnchor. Would be nice if this was wrapped in yet another helper.

bbortt commented 7 years ago

@jpbufe3 Thank you for describing the problem a bit further. My mind was limited to a single page application. Then you may search the problem rather in the router than in this extension. I know there are some implementations of the react life cicle like #willUpdate() or #didUpdate().. No time to google right now :) Or use the react life cycle in your root component. It might re-render.. Those were just some quick thoughts. Hope they may help you.