All Projects → AvraamMavridis → react-intersection-visible

AvraamMavridis / react-intersection-visible

Licence: other
HOC to track when a component enters the visible viewport.

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects
CSS
56736 projects

Projects that are alternatives of or similar to react-intersection-visible

React Viewport Slider
react-viewport-slider is a react component (obviously) that displays a sequence of contents using 100% of the viewport with and height.
Stars: ✭ 144 (+182.35%)
Mutual labels:  viewport
Within Viewport
JavaScript utility that determines whether an element is completely within the browser viewport
Stars: ✭ 244 (+378.43%)
Mutual labels:  viewport
nuxt-viewport
🌈 Define custom viewports for your Nuxt project
Stars: ✭ 55 (+7.84%)
Mutual labels:  viewport
React Intersection Observer
React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.
Stars: ✭ 2,689 (+5172.55%)
Mutual labels:  viewport
Ng In Viewport
Allows us to check if an element is within the browsers visual viewport
Stars: ✭ 178 (+249.02%)
Mutual labels:  viewport
angular-inviewport
A simple lightweight library for Angular with no other dependencies that detects when an element is within the browser viewport and adds a "sn-viewport-in" or "sn-viewport-out" class to the element
Stars: ✭ 72 (+41.18%)
Mutual labels:  viewport
Use Is In Viewport
A react hook to find out if an element is in a given viewport with a simple api.
Stars: ✭ 129 (+152.94%)
Mutual labels:  viewport
taeseung vimrc
Taeseung Lee's vim setting
Stars: ✭ 16 (-68.63%)
Mutual labels:  viewport
React In Viewport
Detect if React component is in viewport
Stars: ✭ 183 (+258.82%)
Mutual labels:  viewport
socket.io-react
A High-Order component to connect React and Socket.io easily
Stars: ✭ 67 (+31.37%)
Mutual labels:  high-order-component
Viewport.jquery
viewport.jquery - simple but handy jQuery plugin adding methods and CSS selectors to check if element is in certain viewport
Stars: ✭ 156 (+205.88%)
Mutual labels:  viewport
Rem Vw Layout
移动端 REM布局 与 Viewport (VW) 布局的实例运用
Stars: ✭ 176 (+245.1%)
Mutual labels:  viewport
render-props
㸚 Easy-to-use React state containers which utilize the render props (function as child) pattern
Stars: ✭ 33 (-35.29%)
Mutual labels:  viewport
React Virtual List
Virtual list in React
Stars: ✭ 147 (+188.24%)
Mutual labels:  viewport
react-scroll-trigger
📜 React component that monitors scroll events to trigger callbacks when it enters, exits and progresses through the viewport. All callback include the progress and velocity of the scrolling, in the event you want to manipulate stuff based on those values.
Stars: ✭ 126 (+147.06%)
Mutual labels:  viewport
Mobile Web Favorites
This is a favorites, with a mobile web tips.
Stars: ✭ 1,724 (+3280.39%)
Mutual labels:  viewport
Ember In Viewport
Detect if an Ember View or Component is in the viewport @ 60FPS
Stars: ✭ 247 (+384.31%)
Mutual labels:  viewport
vue-observable
IntersectionObserver, MutationObserver and PerformanceObserver in Vue.js
Stars: ✭ 24 (-52.94%)
Mutual labels:  viewport
onscroll-effect
A tiny JavaScript library to enable CSS animations when user scrolls.
Stars: ✭ 35 (-31.37%)
Mutual labels:  viewport
deakins
🎥 Small Canvas 2D Camera
Stars: ✭ 135 (+164.71%)
Mutual labels:  viewport

react-intersection-visible

HOC-wrapper Component that helps you track when an element enters in the viewport. It uses the new IntersectionObserver API with polyfill fallback

Demo

Build Status Greenkeeper badge

How to use

  1. Import IntersectionVisible hoc component
  2. Wrap your main component with the IntersectionVisible
  3. Provide the options and callbacks you want

Example

import React, { Component }   from 'react';
import ReactDOM               from 'react-dom';
import IntersectionVisible    from 'react-intersection-visible';

class YourComponent extends Component
{

    onHide( entries )
    {
        // do something
    }

    onShow( entries )
    {
        // do something
    }

    onIntersect( entries )
    {
        // do something
    }

    render(){
        return (<IntersectionVisible onIntersect={ e => this.onIntersect( e ) }
                                     onHide={ e => this.onHide( e ) }
                                     onShow={ e => this.onShow( e ) }>
                    <div>
                        blah blah blah  blah blah blah  blah blah blah  blah blah
                          blah blah blah  blah blah blah  blah blah blah
                    </div>
                </IntersectionVisible>);
    }
}

Options:

Name Description
onIntersect Function that is called when the visibility status of the element change
onHide Function that is called when the element becomes invisible
onShow Function that is called when the element becomes visible
options Object, with the extras options supported by the IntersectionObserver API (root, rootMargin, threshold)

More about the options here

Contribute

Any pull-request is more than welcome 💥 😄

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].