react-custom-scrollbars - React scrollbars component

  •        275

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.

https://github.com/malte-wessel/react-custom-scrollbars

Dependencies:

dom-css : ^2.0.0
prop-types : ^15.5.10
raf : ^3.1.0

Tags
Implementation
License
Platform

   




Related Projects

simplebar - Custom scrollbars vanilla javascript library with native scroll, done simple, lightweight, easy to use and cross-browser

  •    CSS

⚠️ SimpleBar v3 is here! Check out the beta version. npm install simplebar@3.0.0-beta.0. If you're using React, you should use our React version! npm install simplebar-react@0.0.1-beta.0. SimpleBar is a plugin that tries to solve a long time problem : how to get custom scrollbars for your web-app? SimpleBar does NOT implement a custom scroll behaviour. It keeps the native overflow: auto scroll and only replace the scrollbar visual appearance.

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


jquery-mobile-iscrollview - JQuery Mobile widget plug-in for easy use of the iScroll javascript scroller

  •    Javascript

JQuery Mobile widget plug-in for easy use of the iScroll scroller in JQuery Mobile projects. iScroll is a javascript that can scroll content in a window within a web browser with very similar behaviour to native scrolling on mobile devices such as iPhone and Android. This means you can scroll a window within the browser using native-like scrollbars and physics.

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-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-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-native-keyboard-input - Use your own custom input component instead of the system keyboard

  •    Objective-C

Presents a React component as an input view which replaces the system keyboard. Can be used for creating custom input views such as an image gallery, stickers, etc. Supports both iOS and Android.

react-native-ultimate-listview - A high performance FlatList providing customised pull-to-refresh | auto-pagination & infinite-scrolling | gridview layout | swipeable-row

  •    Javascript

This module supports both of iOS and Android platforms. Know Issue (v3.3.0): On Android, if you are using CustomRefreshView, and the total hight of your first load data is less than your device height, then the RefreshView may still sticky on the top. However, if the data you loaded is beyond your screen, everything's fine. This issue only happen on Android, any PR is welcome.

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-hint - Tooltip component for React, Preact, Inferno

  •    Javascript

React-hint is a small tooltip component for React which is developed with simplicity and performance in mind. It also plays nicely with Preact and Inferno. You don't need to include ReactHint in every component which uses tooltips, just include it once in the topmost container component. In case you need to define multiple instances of ReactHint, you can customise the attribute name per instance. ReactHint also supports custom tooltip content with attached event handlers by overriding the content renderer and returning a react node.

react-native-star-rating - A React Native component for generating and displaying interactive star ratings

  •    Javascript

A React Native component for generating and displaying interactive star ratings. Compatible with both iOS and Android. For the emptyStar, fullStar, halfStar, and iconSet props, please refer to the react-native-vector-icons package for the valid string names for the star icons. When selecting the icon string names, you must remember to remove the font family name before the first hyphen. For example, if you want to use the ion-ios-star from the Ionicon font set, you would set the fullStar prop to ios-star and the iconSet to Ionicons.

virtual-scroller

  •    

This repository hosts explorations for a new web platform feature, a virtual scroller control. The idea of a virtual scroller is to provide a scrolling "viewport" onto some content, allow extremely large numbers of elements to exist, but maintain high performance by only paying the cost for those that are currently visible. Traditionally, we say that the non-visible content is virtualized. Virtualized content is a popular and important pattern on the web. Most content uses it in some form: the https://m.twitter.com and https://facebook.com feeds; Google Photos and YouTube comments; and many news sites which have an automatic "scroll to next article" feature. Most popular frameworks have at least one high-usage virtualization component, e.g. React Virtualized with ~290K weekly downloads. See the infinite list study group for more research on existing virtualization solutions, both on the web and in other platforms like iOS.

react-native-masked-text - A simple masked text and input text component for React-Native.

  •    Javascript

This is a simple masked text (normal text and input text) component for React-Native. credit-card: use the mask 9999 9999 9999 9999. It accepts options (see later in this doc). cpf: use the mask 999.999.999-99 and numeric keyboard. cnpj: use the mask 99.999.999/9999-99 and numeric keyboard. zip-code: use the mask 99999-999 and numeric keyboard. only-numbers: accept only numbers on field with numeric keyboard. money: use the mask R$ 0,00 on the field with numeric keyboard. It accepts options (see later in this doc). cel-phone: use the mask (99) 9999-9999 or (99) 99999-9999 (changing automaticaly by length). It accepts options (see later in this doc). datetime: use datetime mask with moment format (default DD/MM/YYYY HH:mm:ss). It accepts options (see later in this doc). custom: use your custom mask (see the options props later in this doc).

react-native-actionsheet - An elegant ActionSheet component for React Native.

  •    Javascript

Cross platform ActionSheet. This component implements a custom ActionSheet and provides the same way to drawing it on the defferent platforms(iOS and Android). Actually, In order to keep the best effect, it still uses the ActionSheetIOS on iOS. The style of ActionSheet is defined in lib/styles.js. We can pass the styles prop to cover default style. See Example .

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

  •    Javascript

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