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-scrollTags | react-component react-dnd scroll autoscroll |
Implementation | TypeScript |
License | MIT |
Platform |
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 scrollspyA 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 dndA versatile infinite scroll React component.ReactList depends on React.
react react-component table-view infinite-scrollDrag 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 hocAnimate Scroll React Component
scroll-animations react-animation scroll-animReact 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 animationA 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-componentSince 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-dndReact 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 scrollOn 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 sidebarNote: 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 androidSwiper 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⚠️ This repo is no longer maintained. There is an active fork running at CassetteRocks/react-infinite-scroller.
infinite scroll reactReact 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 scrollInvertibleScrollView 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-viewInfiniteScrollView 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-viewSimple ScrollArea component built for React. For React 0.13 you need to wrap <ScrollArea> child into a function.
scrollbar react react-component component scroll scrollareaBeautiful, accessible drag and drop for lists with React.js
react drag-and-drop drag dnd react.js natural beautifulReact 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-listThis 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
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.