search

flyingant / react-scroll-to-component

smooth scrolling to react component via reference.
https://flyingant.github.io/react-scroll-to-component/
168 stars 27 forks source link

Can you add a more elaborated example? #1

Closed santimendoza closed 7 years ago

santimendoza commented 7 years ago

I mean, the element (ref) what kind of element needs to be?

How to use it inside a React Component to scroll to some points of the page?

vladinator1000 commented 7 years ago

This might help you out: https://facebook.github.io/react/docs/refs-and-the-dom.html

erikhuisman commented 7 years ago

this.refs is deprecated so you should just pass a Dom node to scrollToComponent. But that would make this package kinda obsolete

Legacy API: String Refs If you worked with React before, you might be familiar with an older API where the ref attribute is a string, like "textInput", and the DOM node is accessed as this.refs.textInput. We advise against it because string refs have some issues, are considered legacy, and are likely to be removed in one of the future releases. If you're currently using this.refs.textInput to access refs, we recommend the callback pattern instead.

vladinator1000 commented 7 years ago

@smendozaisf try this (in a class)

<input
          type="text"
          ref={(input) => { this.textInput = input; }} 
/>

// without options
scrollToComponent(this.textInput);
flyingant commented 7 years ago

Got an example now: https://flyingant.github.io/react-scroll-to-component/ Closing.