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

1. 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')
);

API

StickyPanelScroller#props

renderStickyPanel: element , required

Scrollable and sticky component, which will go in left side of MasterPanelView

renderMasterPanelView: element, required

Master scrolling component, StickyPanels behavior depends on MasterPanelView

tpBtmSpacing: number

Set top and bottom attribute to StickyPanel component.

stickyPanelWidth: number

Set width attribute to stickyPanel component. if not given defaulted to 350

Future scope

Separate top and bottom spacing More configurable options. Support for fixed element spacing on top or bottom