https://github.com/skrivle/react-inverted-scrollview
Easily support inverted scrolling. Maintains a correct scroll position when new content is added.
https://github.com/skrivle/react-inverted-scrollview
infinite-scroll inverted react scroll scrollview ui
Last synced: 3 months ago
JSON representation
Easily support inverted scrolling. Maintains a correct scroll position when new content is added.
- Host: GitHub
- URL: https://github.com/skrivle/react-inverted-scrollview
- Owner: skrivle
- Created: 2018-06-17T13:46:55.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2019-08-09T11:44:21.000Z (almost 7 years ago)
- Last Synced: 2024-04-24T06:03:07.498Z (about 2 years ago)
- Topics: infinite-scroll, inverted, react, scroll, scrollview, ui
- Language: JavaScript
- Size: 217 KB
- Stars: 10
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
[](https://travis-ci.org/vejersele/react-inverted-scrollview)
# React Inverted ScrollView
Easily support inverted scrolling in for example chat apps. Maintains a correct scroll position when new content is added.
## Installation:
```
npm install react-inverted-scrollview --save
```
## Example:
```javascript
import _ from 'lodash';
import React, { Component } from 'react';
import ScrollView from 'react-inverted-scrollview';
class MyComponent extends Component {
state = {
messages: _.range(30).map(index => ({
id: index,
text: `message-${index}`
}))
};
scrollToBottom() {
if (!this.scrollView) return;
this.scrollView.scrollToBottom();
}
scrollToTop() {
if (!this.scrollView) return;
this.scrollView.scrollToTop();
}
handleScroll = ({ scrollTop, scrollBottom }) => {
console.log('scrollTop', scrollTop);
console.log('scrollBottom', scrollBottom);
};
render() {
const { messages } = this.state;
return (
(this.scrollView = ref)}
onScroll={this.handleScroll}
>
{messages.map(message =>
{message.text})}
);
}
}
```
## API
### Props
| Prop | Type | Default |
| ----------------------------- | ---------------------------------------------------------- | -------- |
| width | number | 100 |
| height | number | 100 |
| onScroll | (info: { scrollBottom: number, scrollTop: number }) => any | () => {} |
| style | Object {} | {} |
| restoreScrollPositionOnUpdate | boolean | true |
| children | React.Node or ({restoreScrollPosition}) => Node | Node |
### Instance methods
```javascript
instance.scrollToBottom();
instance.scrollToTop();
instance.setScrollBottom(value);
instance.setScrollTop(value);
instance.restoreScrollPosition();
```
## Check out the examples:
```
git clone https://github.com/vejersele/react-inverted-scrollview.git
cd react-inverted-scrollview
npm install
npm run storybook
```