react-inview-monitor - Declarative in-view scroll monitor for React JS

  •        79

See the demos for some example usage. There are other ~ scoll monitor libraries for React available, but none of them solved our use cases: to be able to declaratively configure animations and other effects to be triggered when individual elements came into the view. Inspired by the wow reveal animation library we set out to get to the same ease of use but within react's code paradigm.

https://snipsco.github.io/react-inview-monitor/
https://github.com/snipsco/react-inview-monitor

Dependencies:

prop-types : ^15.5.10
react : ^15.6.1

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

scrollMonitor - A simple and fast API to monitor elements as you scroll

  •    Javascript

The scroll monitor allows you to receive events when elements enter or exit a viewport. It does this using watcher objects, which watch an element and trigger events. Watcher objects also contain information about the element they watch, including the element's visibility and location relative to the viewport. If your scroll container is an element other than the body you can create a container that creates watchers. The scroll monitor was designed to be very fast. On each scroll event the DOM is only touched twice, once to find the document height and again to find the viewport top. No variables are declared, nor are any objects, arrays, or strings created. Watchers are very cheap. Create them liberally.

angular-inview - AngularJS directive to check if a DOM element is in the browser viewport.

  •    Javascript

Check if a DOM element is or not in the browser current visible viewport. This module will define two directives: in-view and in-view-container.


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

  •    Javascript

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

react-id-swiper - A library to use idangerous Swiper as a ReactJs component.

  •    Javascript

Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity.

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.

scrollMonitor - A simple and fast API to monitor elements as you scroll

  •    Javascript

A simple and fast API to monitor elements as you scroll

the-road-to-learn-react - The Road to learn React: Your journey to master plain yet pragmatic React

  •    

The official repository for The Road to learn React. In addition, here you can find the Source Code and Complete Course. If you want to leave a review, you can do it on Amazon or Goodreads. This book is hosted on Leanpub as well. You can help to improve the book by opening Issues and Pull Requests (PR).

sri - Build truly native cross platform (web,ios,android) apps using scalajs and react, react-native ,This project moved to new organization : https://github

  •    Scala

Sri (Scala React interface) is a scalajs library to build truly native cross platform (mobile (ios and android) and web) applications. It is based on reactjs and react-native, so you must be familiar with them in order to use this library.

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-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-absolute-grid - An absolutely positioned, animated, filterable, sortable, drag and droppable, ES6 grid for React

  •    Javascript

An absolute layout grid with animations, filtering, zooming, and drag and drop support. Use your own component as the grid item. See the Demo. The idea behind AbsoluteGrid is high performance. This is achieved by using Translate3d to position each item in the layout. Items are never removed from the DOM, instead they are hidden. For best performance you should avoid re-arranging or removing items which you pass into AbsoluteGrid, instead you can use the filtered and sort properties to hide or sort an item. Those properties are customizable using the keyProp and filterProp properties. In addition, all data passed must be immutable so that we don't waste any renders.

isomorphic-flux-boilerplate - ES7 Isomorphic Flux/ReactJS Boilerplate

  •    Javascript

A wonderfull boilerplate for Flux/ReactJS universal applications, running on koajs. Koa will be our server for the server side rendering, we use alt for our Flux architecture and react-router for routing in our app.