react-waypoint - A React component to execute a function whenever you scroll to an element.

•    Javascript

---

A React component to execute a function whenever you scroll to an element. Works in all containers that can scroll, including the window. React Waypoint can be used to build features like lazy loading content, infinite scroll, scrollspies, or docking elements to the viewport on scroll.

react component react-component scroll onscroll scrollspy

react-smooth-dnd - react wrapper components for smooth-dnd

•    Javascript

---

A fast and lightweight drag&drop, sortable library for React with many configuration options covering many d&d scenarios. It uses css transitions for animations so it's hardware accelerated whenever possible. This library consists wrapper React components over smooth-dnd library.

react drag-and-drop draggable dragndrop sortable reactjs drag drop drag-drop drag&drop dnd

react-list - :scroll: A versatile infinite scroll React component.

•    Javascript

---

A versatile infinite scroll React component.ReactList depends on React.

react react-component table-view infinite-scroll

react-dnd - Drag and Drop for React

•    TypeScript

---

Drag and Drop for React. Big thanks to BrowserStack for letting the maintainers use their service to debug browser issues.

react drag-and-drop reactjs file drag drop html5 draggable droppable dnd react-component hoc

scroll-anim - Animate Scroll React Component

•    Javascript

---

Animate Scroll React Component

scroll-animations react-animation scroll-anim

react-spark-scroll - Scroll-based actions and animations for react

•    Javascript

---

React port of spark-scroll. Start with the GSAP version of the library, but note that you can use Rekapi or your own animator if you have a preference.

react react-component scroll scrolling animation

react-native-keyboard-aware-scroll-view - A ScrollView component that handles keyboard appearance and automatically scrolls to focused TextInput

•    Javascript

---

A ScrollView component that handles keyboard appearance and automatically scrolls to focused TextInput. You can use the KeyboardAwareScrollView, the KeyboardAwareListView, KeyboardAwareSectionList or the KeyboardAwareFlatList components. They accept ScrollView, ListView, SectionList and FlatList default props respectively and implement a custom high order componente called KeyboardAwareHOC to handle keyboard appearance. The high order component is also available if you want to use it in any other component.

react-native scroll-view react react-components scrollview-component keyboard scrollview ios android react-component

react-dnd-touch-backend - Touch Backend for react-dnd

•    Javascript

---

Since native Drag-n-Drop is not currently supported in touch devices. A custom DragPreview is required. Check out the example for a sample implementation.We might try to build it directly in the Backend itself in the future to compensate for this limitation.

react drag drop touch react-dnd

react-router-scroll - React Router scroll management

•    Javascript

---

React Router scroll management. react-router-scroll is a React Router middleware that adds scroll management using scroll-behavior. By default, the middleware adds browser-style scroll behavior, but you can customize it to scroll however you want on route transitions.

react react-router scroll

react-native-side-menu - Side menu component for React Native

•    Javascript

---

On iPhone, the scroll-to-top gesture has no effect if there is more than one scroll view on-screen that has scrollsToTop set to true. Since it defaults to true in ReactNative, you have to set scrollsToTop={false} on your ScrollView inside Menu component in order to get it working as desired.

react-native react-native-component side-menu react-component ios sidebar

react-native-parallax-scroll-view - A ScrollView-like component with parallax and sticky header support

•    Javascript

---

Note: For React Native 0.19.0 and earlier, you'll want to use react-native-parallax-scroll-view@0.17.4. Version 0.18.0 changes the scrolling API to be compatible with React Native 0.20.0. Please refer to the ListView example provided to see how ParallaxScrollView can be used in combination with ListView.

react-native react parallax scrollable scrollview sticky react-component ios android

react-native-snap-carousel - Swiper/carousel component for React Native with previews, multiple layouts, parallax images, performant handling of huge numbers of items, and RTL support

•    Javascript

---

Swiper component for React Native featuring previews, multiple layouts, parallax images, performant handling of huge numbers of items, and RTL support. Compatible with Android & iOS. This app is available on Android and iOS. It uses version 3.2.0 of the plugin, with FlatList's implementation and parallax images.

carousel swiper flatlist-based parallax-effect infinite-scroll advanced-effects react native slider flatlist scrollview parallax images infinite scroll scrolling items edge snap card cards stack deck tinder android ios snapping component rtl

react-infinite-scroll - An infinite scroll component for React

•    Javascript

---

⚠️ This repo is no longer maintained. There is an active fork running at CassetteRocks/react-infinite-scroller.

infinite scroll react

react-reveal - Easily add reveal on scroll animations to your React app

•    Javascript

---

React Reveal is an animation framework for React. It's MIT licensed, has a tiny footprint and written specifically for React in ES6. It can be used to create various cool reveal on scroll animations in your application. If you liked this package, don't forget to star the Github repository. Also, there are more complicated examples of animated form errors and a todo app.

animation react-components reveal scroll-animations react reactreveal scroll

react-native-invertible-scroll-view - An invertible ScrollView for React Native

•    Javascript

---

InvertibleScrollView is a React Native scroll view that can be inverted so that content is rendered starting from the bottom, and the user must scroll down to reveal more. This is a common design in chat applications and the command-line terminals. InvertibleScrollView also supports horizontal scroll views to present content from right to left. It conforms to ScrollableMixin so you can compose it with other scrollable components.

react-native invertible scroll-view

react-native-infinite-scroll-view - An infinitely scrolling view that notifies you as the scroll offset approaches the bottom

•    Javascript

---

InfiniteScrollView is a React Native scroll view that notifies you as the scroll offset approaches the bottom. You can instruct it to display a loading indicator while you load more content. This is a common design in feeds. InfiniteScrollView also supports horizontal scroll views. It conforms to ScrollableMixin so you can compose it with other scrollable components.

react-native infinite pagination scroll-view

reactScrollbar - Scrollbar component for React

•    Javascript

---

Simple ScrollArea component built for React. For React 0.13 you need to wrap <ScrollArea> child into a function.

scrollbar react react-component component scroll scrollarea

react-beautiful-dnd - Beautiful, accessible drag and drop for lists with React.js

•    Javascript

---

Beautiful, accessible drag and drop for lists with React.js

react drag-and-drop drag dnd react.js natural beautiful

virtual-list - 🧾 React Virtual List Component which worked with animation

•    TypeScript

---

React Virtual List Component which worked with animation. children provides additional props argument to support IE 11 scroll shaking. It will set style to visibility: hidden when measuring. You can ignore this if no requirement on IE.

react react-component antd ant-design virtual-list

react-custom-scrollbars - React scrollbars component

•    Javascript

---

This assumes that you’re using npm package manager with a module bundler like Webpack or Browserify to consume CommonJS modules. If you don’t yet use npm or a modern module bundler, and would rather prefer a single-file UMD build that makes ReactCustomScrollbars available as a global object, you can grab a pre-built version from unpkg. We don’t recommend this approach for any serious application, as most of the libraries complementary to react-custom-scrollbars are only available on npm.

scrolling react scrollbars customizable scroll scroller react-component custom