# sticky-panel-scroller

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

Latest version **0.0.4** (published 2018-02-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install sticky-panel-scroller
pnpm add sticky-panel-scroller
yarn add sticky-panel-scroller
bun add sticky-panel-scroller
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2018-02-25 |
| First published | 2018-02-11 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 666.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Nikhil Chougule |
| Maintainers | nikhil-chougule |
| Keywords | master slave scroll, flipkart like scroll, sticky panel, master child scroll, parent child scroll, fixed panel while scrolling |

## Links

- npm: https://www.npmjs.com/package/sticky-panel-scroller
- Repository: https://github.com/nikhilreprime/react-sticky-panel-scroller
- Homepage: https://github.com/nikhilreprime/react-sticky-panel-scroller#readme
- Issues: https://github.com/nikhilreprime/react-sticky-panel-scroller/issues
- npm.io page: https://npm.io/package/sticky-panel-scroller

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^16.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.2.0
- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0

## Recent versions

- 0.0.4 (latest) — 2018-02-25
- 0.0.3 — 2018-02-12
- 0.0.2 — 2018-02-11
- 0.0.1 — 2018-02-11

## README

# 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](https://master-slave-scroll.herokuapp.com).

## Installation

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

## Usage

```jsx
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

---
_Source: https://npm.io/package/sticky-panel-scroller · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._