Expose animateScroll function

[eddietindame]

Hello,

Would it be possible to expose the animateScroll function from the helpers as an es6 export so that we can programatically call the scrolling function without having to click on or use the React component?

Something like this: import { animateSroll } from 'react-scrollchor'

then we can () => { animateScroll('#to', '#target', (optional) animation) }

This would be really helpful as it will allow us to scroll to anchors on different pages. We can change our route then directly call the animateScroll function on the new page. I don't see how this is currently possible with just the component.

Thanks!

[bySabi]

@eddietindame It can probably be done with a little time and effort but I suppose it would be to expose an API that is beyond the purpose of this component.

The component encapsulates certain logics that would be useful to you and would be lost if you only use the helpers. You would have to reimplement the logic for yourself if necessary. As:

• browsing history management
• normalization of the target id
• management of after and before scroll callbacks
• manage your own default animation settings and easing function.
• manage the Scrollable ancestor container

It seems to me a lot of work unless you don't want to use React. In which case it would be better if you copied the helpers yourself and created your own solution.

Have you tried the Childrenless API ?: https://github.com/some-react-components/react-scrollchor#simulate-click-api. With it you can use all the functionality of the component and the click is simulated programmatically. This is an example of a component that changes the target id using timeout function: https://github.com/some-react-components/react-scrollchor/blob/example/src/App.js#L7 and uses the React simulateClick API.

If you think this API does not cover your usecase please let me know.

Greetings.

[bySabi]

I will close this for now. Feel free to reopen is needed.

[eddietindame]

@bySabi I see what you're saying. It could be considered slightly out of the scope of this component. But it's kind of just refactoring existing functionality.

I'm now using click simulation on childless components as per your suggestion, however it's quite an awkward api as it forces me to create extra components that shouldn't be there and then store and pass refs around my application in an annoying fashion. It works for now, but I'll be looking to refactor this and perhaps use another library if I get time because there are too many extra steps in the code as it is now.

I do hope we can get a simple scrolling function in the future, but otherwise It's a good component.

Thanks!

[bySabi]

References are always necessary because scrolling is an operation that occurs at the level of the DOM Elements not at the level of React abstractions. A reference to a Node DOM container is required.

The core of the scrolling is here: https://github.com/some-react-components/react-scrollchor/blob/master/src/helpers.js#L17. Just setting th scrollTop position of DOM Element.

anyway PRs are welcome :-)

[bySabi]

For some time I was working on a generic scrolling functionality but not continue due to lack of time.

Maybe is useful too you. https://github.com/bySabi/react-scrollaware

My plan was to build several use cases using this lib as core but I never did.

[bySabi]

If you wish, you can send me a fragment of your code to my email in order to see the part you don't like in the library and try to help you with it.