React Scroll-To
A React component that makes scrolling easy.
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:
// 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 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>
{
(scroll) => (
<ScrollArea style={{ height: 1000 }}>
<button onClick={() => scroll(0, 500)}>
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>
{
(scroll, scrollById) => (
<div>
<ScrollArea id="foo" style={{ height: 1000 }}>
<button onClick={() => scrollById("foo", 0, 500)}>
Scroll within this container
</button>
</ScrollArea>
<ScrollArea style={{ height: 1000 }}>
This container won't scroll
</ScrollArea>
</div>
)
}
</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 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.scroll(0, 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.scrollById("foo", 0, 500)}>
Scroll to Bottom
</a>
</ScrollArea>
<ScrollArea style={{ height: 1000 }}>
This container won't scroll
</ScrollArea>
</div>
);
})