dnd-scroll - Scroll workaround for React Drag and Drop

  •        803

Add-on for React DnD. Auto scroll when dragging to the top or bottom of the window; compensates for inability to use mousewheel or keyboard scrolling while dragging in React DnD's default (HTML5) backend. Bottom line: Import the module, and include its Scroller component anywhere in your top-level component. Connect it to your React-DnD boilerplate functions using props. Configure the (scroll zone) height and speed props if desired.

https://github.com/David-OConnor/dnd-scroll

Dependencies:

react-dnd : ^2.3.0

Tags
Implementation
License
Platform

   




Related Projects

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-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-list - :scroll: A versatile infinite scroll React component.

  •    Javascript

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

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-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-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-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-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-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-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-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.

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.

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.

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-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.

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.

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-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.






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.