👟 React Scroll-To
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 windowimport React Component from "react";import ScrollTo from "react-scroll-to"; { return <ScrollTo> scroll <a =>Scroll to Bottom</a> </ScrollTo> ; }
// Scroll to position (0, 500) within all provided <ScrollArea /> childrenimport React Component from "react";import ScrollTo ScrollArea from "react-scroll-to"; { return <ScrollTo> scroll <ScrollArea => <button => Scroll within this container </button> </ScrollArea> </ScrollTo> ; }
// Scroll to position (0, 500) within a specific <ScrollArea /> childimport React Component from "react";import ScrollTo ScrollArea from "react-scroll-to"; { return <ScrollTo> scroll <div> <ScrollArea ="foo" => <button => Scroll within this container </button> </ScrollArea> <ScrollArea => This container scroll </ScrollArea> </div> </ScrollTo> ; }
// Scroll by a component's refimport React Component from "react";import ScrollTo from "react-scroll-to"; myRef = React; { return <> <ScrollTo> scroll <a => Scroll to Bottom </a> </ScrollTo> <div =>My Element</div> </> ; }
Higher Order Component:
// Scroll to position (0, 500) within the browser windowimport React from "react";import ScrollToHOC from "react-scroll-to"; { return <a =>Scroll to Bottom</a>;};
// Scroll to position (0, 500) within all provided <ScrollArea /> childrenimport React from "react";import ScrollToHOC ScrollArea from "react-scroll-to"; { return <ScrollArea => <a =>Scroll to Bottom</a> </ScrollArea> ;};
// Scroll to position (0, 500) within a specific <ScrollArea /> childimport React from "react";import ScrollToHOC ScrollArea from "react-scroll-to"; { return <div> <ScrollArea ="foo" => <a => Scroll to Bottom </a> </ScrollArea> <ScrollArea => This container 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.
Mixing and matching these options give different results.
- The
scrollById
function has been deprecated in favor of theid
field inscrollTo
Smooth Scrolling Not Working?
Some browsers don't natively support smooth scroll. Checkout adding a polyfill like smoothscroll-polyfill
to fix the issue.
npm install smoothscroll-polyfill
Contributors
Thanks goes to these wonderful people (emoji key):
Dylan Paulus 💻 📖 |
Anthony Ng 💻 📖 |
UmenR 💻 |
Yi Wen 💻 |
Shitanshu Pandey 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!