A set of components that react to page scrolling

Last update: Aug 27, 2021

react-scroll-components

A set of components and mixins that react to page scrolling

ScrollListenerMixin

This mixin provides the following states:

  • scrollTop, which represents the documents' current scroll position
  • isScrolling, wether the user is currently scrolling the document

You can pass the following methods to your React class:

  • onPageScroll: fired when the document is scrolling. This function gets the current scroll position passed as argument.
  • onPageScrollEnd: fired when the document's scroll position hasn't changed for 300 milliseconds. This function also gets the current scroll position passed as argument. If you want to change the timeout, override your components' endScrollTimeout

ScrollBlocker

A very simple component that allows you to block any mouse events during scrolling.

Example

var MyComponent = React.createClass({
	mixins: [ScrollListenerMixin],
	render: function () {
		return (
			<ScrollBlocker active={this.state.isScrolling}>
				The current scroll position is {this.state.scrollTop}.<br />
				The document is currently {this.state.isScrolling ? '' : 'not'} scrolling.
			</ScrollBlocker>
		)
	}
})

GitHub

https://github.com/jeroencoumans/react-scroll-components
Comments
  • 1. does not work with babel-loader

    Module build failed: SyntaxError in ScrollBlocker.js

    Unexpected token (24:25)
      22 | 
      23 |   render: function () {
    > 24 |     var { style, active, ...other } = this.props;
         |                          ^
    
    Reviewed by flosse at 2015-04-21 23:06
  • 2. Don't break IE8 by assuming add/removeEventListener.

    Reviewed by heldinz at 2015-08-26 14:05
  • 3. Please update!

    Object.assign is no longer part of the react library in its current version, please change it to spread operators!

    will make a PR

    UPDATE: actually spread operators are new and can cause errors. Instead the code now uses Object.assign directly vs referencing it from the react library which removed that a while ago.

    Reviewed by jnrepo at 2016-09-14 20:03
  • 4. @jsx pragma deprecated in 0.12

    As found in:

    https://facebook.github.io/react/blog/2014/10/16/react-v0.12-rc1.html#the-jsx-pragma-is-gone

    the React.DOM pragma has been deprecated as of React 0.12.

    Reviewed by ko at 2015-06-16 07:30
  • 5. Examples needed for implementation please

    hey there!

    I was looking for a mixin much like yours, but can't seem to figure out how to implement it. I was wondering if you could add anything to your readme that could help better guide me from requiring in react-scroll-components

    Reviewed by wontwon at 2015-04-29 19:29
React higher order component for adding onEnterKeyDown to input components

React higher order component for adding onEnterKeyDown to input components

May 4, 2020
Declarative hotkey and focus area management for React

React HotKeys A declarative library for handling hotkeys and focus areas in React applications. Upgrading from 1.*.* ? See the upgrade notes. Looking

May 12, 2022
React component to handle keyboard events :key:

react-key-handler ?? React component to handle keyboard events (such as keyup, keydown & keypress). Testimonials “Happy to see that react-key-handler

Apr 18, 2022
🐭 React hook that tracks mouse events on selected element - zero dependencies
🐭  React hook that tracks mouse events on selected element - zero dependencies

React Mighty Mouse React hook that tracks mouse events on selected element. Demo Demos created with React DemoTab ?? Install npm install react-hook-mi

May 10, 2022
An easy-to-use keyboard event react component, Package size less than 3kb
An easy-to-use keyboard event react component, Package size less than 3kb

An easy-to-use keyboard event react component, Can achieve a variety of custom keyboard functions, Package size less than 3kb

May 5, 2022
Niue is a tiny shared state and event library for React

Niue is a small library (~1.3kb before compression) that provides a simple way to manage your React app's shared state and send events between components.

May 16, 2022
SmartSticky is React component for sticky topbar that will hide when scrolling down and show when scrolling up.
SmartSticky is React component for sticky topbar that will hide when scrolling down and show when scrolling up.

React Smart Sticky Online Demo Features Works like topbars in native applications (Facebook, Medium.com, Instagram etc.) Works on mobile devices Topba

May 2, 2021
react-sticky-scrollspy-nav is a React component that provides smooth scrolling navigation with sections to a web page.

react-sticky-scrollspy-nav react-sticky-scrollspy-nav is a React component that provides smooth scrolling navigation with sections to a web page. How

Mar 3, 2022
ScrollView with infinte paged scrolling (no looping). The number of pages rendered before and after current page can be customized. Pages are rendered when user scrolled.
ScrollView with infinte paged scrolling (no looping). The number of pages rendered before and after current page can be customized. Pages are rendered when user scrolled.

react-native-infinite-scrollview ScrollView with infinte paged scrolling (no looping). The number of pages rendered before and after current page can

Dec 23, 2021
🗺 Mandelbrot set and Julia set explorer made with React and WebGL
🗺 Mandelbrot set and Julia set explorer made with React and WebGL

Mandelbrot Maps Mandelbrot Maps is an interactive fractal explorer built using React and WebGL.

Apr 15, 2022
React/redux wrappers for auto-scrolling react-collapse components

react-scroll-collapse Component wrappers for auto-scrolling collapsible elements - with smooth animations powered by react-motion and react-collapse.

Feb 18, 2021
React hooks and components for large data sets scrolling

React Scroller A set of hooks, components and utilities for scrolling large datasets. Standalone components could be used as well as lower level hooks

Mar 31, 2022
Simulate normal scrolling by using only fixed number of DOM elements for large lists of items with React Hooks

React Recycled Scrolling Simulate normal scrolling by using only fixed number of DOM elements for large lists of items with React Hooks Install npm in

Mar 13, 2022
✌️ ListView with pull-to-refresh and infinite scrolling for Android and iOS React-Native apps
✌️ ListView with pull-to-refresh and infinite scrolling for Android and iOS React-Native apps

Gifted ListView A ListView with pull-to-refresh, infinite scrolling and more for Android and iOS React-Native apps Changelog 0.0.13 Use RefreshControl

May 6, 2022
✨ Infinite scrolling date-picker built with React, with localization, range selection, themes, keyboard support, and more.
✨ Infinite scrolling date-picker built with React, with localization, range selection, themes, keyboard support, and more.

React Infinite Calendar Currently looking for maintainers to help maintain this project, please reach out if you would be interested Examples availabl

May 7, 2022
React web app presenting animate on scrolling

?? Loading While Scrolling Project Video Preview ?? Landing.While.Scrolling.Project.Demo.mp4 ✨ Click Here To See Youtube Tutorial ?? Real Project Prev

Feb 19, 2022
A performance auto horizontal scrolling for react-native
A performance auto horizontal scrolling for react-native

react-native-auto-scrolling Auto horizontal scrolling. You only need to wrap the component between <AutoScrolling>, it is the same as the <marquee> ta

May 15, 2022
React component which implements scrolling via holding the mouse button or touch
React component which implements scrolling via holding the mouse button or touch

React Indiana Drag Scroll Implements scroll on drag Examples / Sandbox Welcome to journey! Try it yourself! Go to demo website. Install npm install --

May 12, 2022
React hook which gives a smooth scrolling function.

use-smooth-scroll React hook which gives a smooth scrolling function. Example (Codesandbox) const Example = () => { const ref = React.useRef() con

Dec 30, 2021
Component that customizes the list and inserts shadow when scrolling exists
Component that customizes the list and inserts shadow when scrolling exists

React Shadow Scroll • • • • • Component that customizes the list and inserts shadow when scrolling exists Installation npm i react-shadow-scroll // OR

Mar 13, 2022