React-tiny-autoscroll - Automatically scrolls the element when the cursor approaches the boundaries.

Last update: Jun 20, 2022

react-tiny-autoscroll

npm version npm downloads npm size

Automatically scrolls the element when the cursor approaches the boundaries.

Demo

Mostly helpful when used in combination with drag and drop-like components which do not support scrollable containers.

Install via npm

npm install react-tiny-autoscroll

or

yarn add react-tiny-autoscroll

Usage

{items.map((n) => ( )}
);">
const containerRef = useRef();

useAutoScroll({
  containerRef,
});

// Making our container scrollable
const style: CSSProperties = {
  height: 400,
  overflowY: "auto",
  border: "1px solid red",
};

return (
  <div ref={containerRef} style={style}>
    {items.map((n) => (
      <Item key={n} />
    )}
  </div>
);

API

  • containerRef - reference to the scrollable container
  • skip - lets you disable/enable the scrolling
  • threshold - distance to boundaries where scrolling will start
  • maxSpeed - maximum number of pixels allowed to scroll in 10ms

GitHub

https://github.com/hosembafer/react-tiny-autoscroll
You might also like...

A thin react component wrapper bundled with scroll-into-view-if-needed

A thin react component wrapper bundled with the fantastic scroll-into-view-if-needed ponyfill. Install yarn add react-scroll-into-view-if-needed or np

Apr 21, 2022

A react module for full page scroll

A react module for full page scroll

react-full-page-scroller A react module for full page scroll Install npm install --save react-full-page-scroller Demo Usage import React, { Component

Feb 22, 2022

A react wrapper for perfect-scrollbar

React-Perfect-Scrollbar This is a wrapper to allow use perfect-scrollbar in React. To read documentation for versions 1.0, please visit v0.2.5. Usag

Jun 21, 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

Jun 13, 2022

Scroll to a position in React

Scroll to a position in React

👟 React Scroll-To A React component that makes scrolling easy. React Scroll-To provides a Higher Order Component, and Render Props implementation. Ex

May 31, 2022

React Provider Component to add a smooth scroll effect

React Use Smooth Scroll React Provider Component to add a smooth scroll effect ?

May 11, 2022

Virtual Scroll Sample (React virtualized)

Virtual Scroll Sample (React virtualized)

Virtual Scroll Sample (React virtualized)

Jun 18, 2022

React-cursor-chat - A react component for cursor chat

React-cursor-chat - A react component for cursor chat

@yomo/react-cursor-chat 🧬 Introduction A react component for cursor chat Press

Jun 8, 2022

A React Custom able cursor that can decorate your site also your hand is open to manipulate the cursor with css

custom-react-cursor A React Custom able cursor that can decorate your site also your hand is open to manipulate the cursor with css Demo live Installi

May 17, 2022

⚡️The Fullstack React Framework — built on Next.js

⚡️The Fullstack React Framework — built on Next.js

⚡️The Fullstack React Framework — built on Next.js

Jun 16, 2022

⚡️The Fullstack React Framework — built on Next.js — Inspired by Ruby on Rails

⚡️The Fullstack React Framework — built on Next.js — Inspired by Ruby on Rails

⚡️The Fullstack React Framework — built on Next.js — Inspired by Ruby on Rails

Oct 12, 2021

React component that scrolls to the top of a page when the current location gets changed

React component that scrolls to the top of a page when the current location gets changed

react-router-scroll-to-top ScrollToTop is a React component that scrolls to the top of a page when the current location gets changed. Since React Rout

Jan 11, 2022

Native modules to determine if a location is within defined geographical boundaries using Google Geometry library

Native modules to determine if a location is within defined geographical boundaries using Google Geometry library

react-native-geo-fencing Native modules to determine if a location is within defined geographical boundaries using Google Geometry library for ios and

May 15, 2022

Studies of React Native Shared Element & React Navigation Shared Element inspired by the Catalin Miron

Studies of React Native Shared Element & React Navigation Shared Element inspired by the Catalin Miron

Studies of React Native Shared Element & React Navigation Shared Element inspired by the Catalin Miron

Nov 4, 2021

😎 🖥️ React hook to monitor an element enters or leaves the viewport (or another element).

😎 🖥️ React hook to monitor an element enters or leaves the viewport (or another element).

😎 🖥️ React hook to monitor an element enters or leaves the viewport (or another element).

Jun 22, 2022

Wrapper component that detects element resize and passes new dimensions down the tree. Based on https://github.com/wnr/element-resize-detector

react-container-dimensions Wrapper component that detects parent (container) element resize and passes new dimensions down the tree. Based on element-

Jun 14, 2022

It is a very tiny component which is a replacement of HTML input element for post-editing format of number values. ex. 1000000 - 1,000,000

It is a very tiny component which is a replacement of HTML input element for post-editing format of number values. ex. 1000000 -> 1,000,000

react-numeral-input It is a very tiny component which is a replacement of HTML input element for post-editing format of number values. ex. 1000000 -

Jan 28, 2019

An edit mask for React based on regular expression syntax with cursor handling.

react-editmask An edit mask for React based on regular expression syntax with cursor handling. Installation react-editmask requires React 0.14 or late

Jul 2, 2019

A creative and customizable React cursor follower component

react-creative-cursor A creative and customizable React cursor follower component. Inspired by cuberto.com and 14islands.com. Options Magnetic cursor

Jun 13, 2022
A React navbar component based on react-scroll
A React navbar component based on react-scroll

React Scrolling NavBar This Repo is not actively maintained! Please do not use in professional environment! This is a React navbar component based on

Mar 1, 2022
React scrollbars component

rc-scrollbars rejuvenated project of react-custom-scrollbars frictionless native browser scrolling native scrollbars for mobile devices fully customiz

May 31, 2022
Scrollbar component for React

react-scrollbar Simple ScrollArea component built for React. Demo npm install react-scrollbar --save React Scrollbar requires React 0.13 or later Feat

May 27, 2022
React components for rendering large scrollable data
React components for rendering large scrollable data

React components for rendering large scrollable data

Jun 19, 2022
React container that will auto scroll to bottom
React container that will auto scroll to bottom

React container that will auto scroll to bottom or top if new content is added and viewport is at the bottom, similar to tail -f. Otherwise, a "jump to bottom" button will be shown to allow user to quickly jump to bottom.

Apr 23, 2022
A highly customisable `marquee` component for React built using CSS

A highly customisable `marquee` component for React built using CSS. Renders anything given between the tags, be it an image, text or a custom JSX element!

Jun 7, 2022
Stable bi-directional infinite scroll React component
Stable bi-directional infinite scroll React component

Stable bi-directional infinite scroll React component. Load additional data from both ends of a container while maintaining current view. Used for chat, timeline, feed views.

Jun 3, 2022
The best React custom scrollbars component

The best React custom scrollbars component

Jun 13, 2022
The best React custom scrollbars component

The best React custom scrollbars component

Sep 8, 2021
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

Jun 7, 2022