November Papa Mike

    @planet/react-scroll-view

    0.3.0 • Public • Published

    react-scroll-view

    A scroll view React component optimized for large numbers of items.

    Installation

    JavaScript

    First,

    npm install @planet/react-scroll-view

    Then in your code you can

    var ScrollView = require('@planet/react-scroll-view')

    css

    Both a .less and a compiled .css file are provided with the module.

    Usage

    var itemHeight = 50;
    var itemStyle = {
      height: itemHeight
    }
    <ScrollView
        itemCount={50}
        itemHeight={itemHeight}
        itemAtPosition={function(position) {
          return (
            <div className="my-item" style={itemStyle}>I am number {position}</div>
          )
        }}/>
    

    The supported properties are:

    • itemCount : Required. the number of items in the scroll view
    • itemHeight: Required. the height of each item. All items must have the same height.
    • itemAtPosition : Required. a function that, when invoked, will return the jsx representing the item at the specified position
    • itemPreloadCount : how many items are loaded outside the visible area of the scroll view. Defaults to 10
    • nativeScrollbar : a boolean value. if set to true, the native scrollbar will be used instead of the custom one. Defaults to false.
    • onScroll: optional callback that will be invoked on every scroll event.

    Keywords

    none

    Install

    npm i @planet/react-scroll-view

    DownloadsWeekly Downloads

    0

    Version

    0.3.0

    License

    ISC

    Last publish

    Collaborators

    • theduckylittle
    • primajin
    • bcvazquez
    • planet-admin
    • tschaub
    • jiert
    • planeto