React Scroll Captor

A component that confines scroll events to its immediate child. Great for dropdown menus etc.

Install

yarn add react-scroll-captor

Use

import ScrollCaptor from 'react-scroll-captor';

class GroovyThing extends Component {
  atBottom = () => {
    // user has scrolled to the bottom
  }
  render () {
    return (
      <ScrollCaptor onBottomArrive={this.atBottom}>
        <ScrollableElement />
      </ScrollCaptor>
    );
  }
}

Props

Property	Type	Default	Description
`isEnabled`	`boolean`	`true`	Enable or disable the component.
`onBottomArrive`	`function`	--	Called when the user reaches the bottom of the scrollable element.
`onBottomLeave`	`function`	--	Called when the user leaves the bottom of the scrollable element.
`onTopArrive`	`function`	--	Called when the user reaches the top of the scrollable element.
`onTopLeave`	`function`	--	Called when the user leaves the top of the scrollable element.

Current Tags

1.0.1 ... latest (7 years ago)

2 Versions

1.0.1 ... 7 years ago
1.0.0 ... 7 years ago