A React component that makes scrolling easy.
React Scroll-To provides a Higher Order Component, and Render Props implementation.
npm: npm install react-scroll-to --save
yarn: yarn add react-scroll-to
Render Props:
// Scroll to position (0, 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>
{
(scroll) => (
<a onClick={() => scroll(0, 500)}>
Scroll to Bottom
</a>
)
}
</ScrollTo>
);
}
}
// Scroll to position (0, 500) within a provided container
import React, { Component } from "react";
import { ScrollTo, ScrollArea } from "react-scroll-to";
export default class MyComponent extends Component {
render() {
return (
<ScrollTo>
{
(scroll) => (
<ScrollArea style={{ height: 1000 }}>
<button onClick={() => scroll(0, 500)}>
Scroll within this container
</button>
</ScrollArea>
)
}
</ScrollTo>
);
}
}
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.scroll(0, 500)}>
Scroll to Bottom
</a>
);
})
// Scroll to position (0, 500) within a provided container
import React from "react";
import { ScrollToHOC, ScrollArea } from "react-scroll-to";
export default ScrollToHOC(function(props) {
return (
<ScrollArea style={{ height: 1000 }}>
<a onClick={() => props.scroll(0, 500)}>
Scroll to Bottom
</a>
</ScrollArea>
);
})
Check out this example on CodeSandbox.
Thanks goes to these wonderful people (emoji key):
Dylan Paulus π» π |
Anthony Ng π» π |
UmenR π» |
---|
This project follows the all-contributors specification. Contributions of any kind welcome!