CODEWITHSUNDEEP
javascripthtmlreactjs
Nicolas
Nicolas

Reputation: 1263

Scroll to a custom component

I am trying to scroll to the position of a custom component but the ref to it isn't returning a valid html node. The method "goToContactUs" should perform the action. Which would be the best way to do this?

class Help extends Component {
    constructor () {
        super();

        this.goToContactUs = this.goToContactUs.bind(this);
    }

    goToContactUs () {
        this.contactUs.scrollIntoView();
    }

    render () {
        return (
            <div>
                <ToggleContainer
                    title={this.props.strings['Contact Us']} 
                    show={this.props.help.showContactUs}
                    toggle={this.contactUsHandler}
                    ref={(div) => { this.contactUs = div }}
                >
                    <ContactUs sendEmail={this.props.sendEmail} emailSuccess={this.props.help.emailSuccess} />
                </ToggleContainer>                  
            </div>
        );
    }
}

Upvotes: 0

Views: 306

Answers (1)

corvid
corvid

Reputation: 11207

You want to change the scrollTop of the ToggleContainer to be the top of the ContactUs.

Since ContactUs will be an instance of that element you can use findDOMNode to get its node representation.

import { findDOMNode } from 'react-dom';

class Help extends Component {
  // ... omitted
  scrollToContact() {
    const yPos = findDOMNode(this.contact).offsetTop;
    this.container.scrollTop = yPos;
  }

  contact = null;
  container = null;

  render() {
    return (<div>
      <ToggleContainer
        title={this.props.strings['Contact Us']} 
        show={this.props.help.showContactUs}
        toggle={this.contactUsHandler}
        ref={container => this.container = container}
      >
        <ContactUs
          ref={contact => this.contact = contact}
          sendEmail={this.props.sendEmail}
          emailSuccess={this.props.help.emailSuccess}
        />
     </ToggleContainer>                  
   </div>);
  }
}

Upvotes: 1

Related Questions