Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »

react-scroll-to

2.0.5 • Public • Published

👟 React Scroll-To

CircleCI Coverage Status All Contributors PRs Welcome

A React component that makes scrolling easy.

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

Example: View React Storybook Examples

Install

npm: npm i react-scroll-to --save

yarn: yarn add react-scroll-to

API

Render Props:

// Scroll to position (20, 500) in the browser window
import React, { Component } from "react";
import { ScrollTo } from "react-scroll-to";
 
export default class MyComponent extends Component {
  render() {
    return (
      <ScrollTo>
        {({ scrollTo }) => (
          <a onClick={() => scrollTo({ x: 20, y: 500 })}>Scroll to Bottom</a>
        )}
      </ScrollTo>
    );
  }
}
// Scroll to position (0, 500) within all provided <ScrollArea /> children
import React, { Component } from "react";
import { ScrollTo, ScrollArea } from "react-scroll-to";
 
export default class MyComponent extends Component {
  render() {
    return (
      <ScrollTo>
        {({ scrollTo }) => (
          <ScrollArea style={{ height: 1000 }}>
            <button onClick={() => scrollTo({ y: 500, smooth: true })}>
              Scroll within this container
            </button>
          </ScrollArea>
        )}
      </ScrollTo>
    );
  }
}
// Scroll to position (0, 500) within a specific <ScrollArea /> child
import React, { Component } from "react";
import { ScrollTo, ScrollArea } from "react-scroll-to";
 
export default class MyComponent extends Component {
  render() {
    return (
      <ScrollTo>
        {({ scrollTo }) => (
          <div>
            <ScrollArea id="foo" style={{ height: 1000 }}>
              <button onClick={() => scrollTo({ id: "foo", y: 500 })}>
                Scroll within this container
              </button>
            </ScrollArea>
 
            <ScrollArea style={{ height: 1000 }}>
              This container won't scroll
            </ScrollArea>
          </div>
        )}
      </ScrollTo>
    );
  }
}
// Scroll by a component's ref
import React, { Component } from "react";
import { ScrollTo } from "react-scroll-to";
 
export default class MyComponent extends Component {
  myRef = React.createRef();
 
  render() {
    return (
      <>
        <ScrollTo>
          {({ scrollTo }) => (
            <a onClick={() => scrollTo({ ref: this.myRef, x: 20, y: 500 })}>Scroll to Bottom</a>
          )}
        </ScrollTo>
 
        <div ref={this.myRef}>
          My Element
        </div>
      </>
    );
  }
}

Higher Order Component:

// Scroll to position (0, 500) within the browser window
import React from "react";
import { ScrollToHOC } from "react-scroll-to";
 
export default ScrollToHOC(function(props) {
  return <a onClick={() => props.scrollTo({ y: 500 })}>Scroll to Bottom</a>;
});
// Scroll to position (0, 500) within all provided <ScrollArea /> children
import React from "react";
import { ScrollToHOC, ScrollArea } from "react-scroll-to";
 
export default ScrollToHOC(function(props) {
  return (
    <ScrollArea style={{ height: 1000 }}>
      <a onClick={() => props.scrollTo({ y: 500 })}>Scroll to Bottom</a>
    </ScrollArea>
  );
});
// Scroll to position (0, 500) within a specific <ScrollArea /> child
import React from "react";
import { ScrollToHOC, ScrollArea } from "react-scroll-to";
 
export default ScrollToHOC(function(props) {
  return (
    <div>
      <ScrollArea id="foo" style={{ height: 1000 }}>
        <a onClick={() => props.scrollTo({ id: "foo", y: 500 })}>Scroll to Bottom</a>
      </ScrollArea>
 
      <ScrollArea style={{ height: 1000 }}>
        This container won't scroll
      </ScrollArea>
    </div>
  );
});

Types:

  • Typescript definitions are built in
  • Flow is currently not support (Open for PRs!)

2.0 Changes

  • v2.0 has a new API for controlling scrolling. Instead of taking two arguments, x and y, the ScrollTo component now takes an object.
scrollTo({
  x: 25 // The horizontal x position to scroll to
  y: 10 // The vertical y position to scroll to
  id: "myId" // The ID of the ScrollArea we want to scroll
  ref: refObj // A reference to a component to scroll
  smooth: true // If true, this will animate the scroll to be smooth. False will give an instant scroll. (defaults: false)
})

Mixing and matching these options give different results.

  • The scrollById function has been deprecated in favor of the id field in scrollTo

Contributors

Thanks goes to these wonderful people (emoji key):


Dylan Paulus

💻 📖

Anthony Ng

💻 📖

UmenR

💻

Yi Wen

💻

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

install

npm i react-scroll-to

Downloadsweekly downloads

879

version

2.0.5

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability