react-inverted-scrollview

1.0.7 • Public • Published

Build Status

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:

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 (
            <ScrollView
                width={400}
                height={400}
                ref={ref => (this.scrollView = ref)}
                onScroll={this.handleScroll}
            >
                {messages.map(message => <div key={message.id}>{message.text}</div>)}
            </ScrollView>
        );
    }
}

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

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

Dependents (1)

Package Sidebar

Install

npm i react-inverted-scrollview

Weekly Downloads

343

Version

1.0.7

License

MIT

Unpacked Size

14.4 kB

Total Files

4

Last publish

Collaborators

  • vejersele