👟 React Scroll-To

A React component that helps in scrolling around a page.

React Scroll-To provides a Higher Order Component, and Render Props implementation.

Install

npm: npm install react-scroll-to --save

yarn: yarn add react-scroll-to

API

Render Props:

import React, { Component } from "react";
import { ScrollTo } from "react-scroll-to";

export default class MyComponent extends Component {
    render() {
        return (
            <ScrollTo>
                {
                    (scroll) => (
                        <a onClick={() => scroll(0, 500)}>
                            Scroll to Bottom
                        </a>
                    ) 
                }
            </ScrollTo>
        );
    }
}

Higher Order Component:

import React from "react";
import { ScrollToHOC } from "react-scroll-to";

export default ScrollDownFiveHundred(function(props) {
    return (
        <a onClick={() => props.scroll(0, 500)}>
            Scroll to Bottom
        </a>
    );
})

Example

Check out this example on CodeSandbox.

Contributors

Thanks goes to these wonderful people (emoji key):

Dylan Paulus 💻 📖	Anthony Ng 💻 📖

This project follows the all-contributors specification. Contributions of any kind welcome!