Sticky-panel-scroller NPM

react-sticky-panel-scroller

working on lib which will help us achieve scrolling effect like e-commerce websites( flipkart like scrolling)

Demo

A Demo is available here.

Installation

Install sticky-panel-scroller using npm. npm install sticky-panel-scroller

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import StickyPanelScroller from 'sticky-panel-scroller';

class App extends Component {

    getStickyPanelView = () =>{
        return(
            <div style={{height : "500px", backgroundColor : "red"}}>

                <div style={{height : "250px", backgroundColor : "blue"}}>This is left1</div>
                <div style={{height : "250px", backgroundColor : "green"}}>This is left2</div>
            </div>
        )
    };

    getMasterPanelView = () =>{
        return(
            <div style={{height : "4000px", backgroundColor : "yellow"}}>
                This is Right
            </div>
        )
    };
  render() {
    return (
      <div>
          <div style={{backgroundColor : "green", height : "200px"}}/>
          <StickyPanelScroller
              tpBtmSpacing = {20}
              stickyPanelWidth = {300}
              renderStickyPanel = {this.getStickyPanelView()}
              renderMasterPanelView = {this.getMasterPanelView()}
          />
          <div style={{backgroundColor : "green", height : "300px"}}/>
          <StickyPanelScroller
              tpBtmSpacing = {30}
              stickyPanelWidth = {400}
              renderStickyPanel = {this.getStickyPanelView()}
              renderMasterPanelView = {this.getMasterPanelView()}
          />
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);