https://github.com/avraammavridis/react-intersection-visible

HOC to track when a component enters the visible viewport.
https://github.com/avraammavridis/react-intersection-visible

high-order-component react viewport visible

Last synced: 2 months ago
JSON representation

HOC to track when a component enters the visible viewport.

• Host: GitHub
• URL: https://github.com/avraammavridis/react-intersection-visible
• Owner: AvraamMavridis
• Created: 2016-06-10T04:44:18.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2020-05-27T06:20:06.000Z (over 4 years ago)
• Last Synced: 2024-10-11T06:29:48.457Z (3 months ago)
• Topics: high-order-component, react, viewport, visible
• Language: JavaScript
• Homepage: http://avraammavridis.github.io/react-intersection-visible/
• Size: 11.8 MB
• Stars: 51
• Watchers: 3
• Forks: 11
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# react-intersection-visible

HOC-wrapper Component that helps you track when an element enters in the viewport. It uses the new [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver)

with polyfill fallback

[Demo](http://avraammavridis.github.io/react-intersection-visible/)

[![Build Status](https://travis-ci.org/AvraamMavridis/react-intersection-visible.svg?branch=master)](https://travis-ci.org/AvraamMavridis/react-intersection-visible) [![Greenkeeper badge](https://badges.greenkeeper.io/AvraamMavridis/react-intersection-visible.svg)](https://greenkeeper.io/)

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

```javascript

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 ( this.onIntersect( e ) }

                                     onHide={ e => this.onHide( e ) }

                                     onShow={ e => this.onShow( e ) }>

                    


                        blah blah blah  blah blah blah  blah blah blah  blah blah

                          blah blah blah  blah blah blah  blah blah blah

                    

                );

    }

}


  ```

### 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](https://developers.google.com/web/updates/2016/04/intersectionobserver?hl=en)

### Contribute

Any pull-request is more than welcome :boom: :smile:

### License

MIT