react-visibility-sensor

What is react-visibility-sensor?

The react-visibility-sensor package is a React component that allows you to detect when a component is visible on the screen. This can be useful for lazy loading images, triggering animations, or tracking user interactions.

What are react-visibility-sensor's main functionalities?

Basic Visibility Detection

This feature allows you to detect when a component becomes visible or hidden. The `onChange` callback is triggered with a boolean value indicating the visibility state.

```jsx
import React from 'react';
import VisibilitySensor from 'react-visibility-sensor';

class MyComponent extends React.Component {
  onChange = (isVisible) => {
    console.log('Element is now %s', isVisible ? 'visible' : 'hidden');
  };

  render() {
    return (
      <VisibilitySensor onChange={this.onChange}>
        <div>
          This is my content
        </div>
      </VisibilitySensor>
    );
  }
}

export default MyComponent;
```

Partial Visibility Detection

This feature allows you to detect partial visibility of a component. By setting the `partialVisibility` prop, the `onChange` callback will be triggered even if only part of the component is visible.

```jsx
import React from 'react';
import VisibilitySensor from 'react-visibility-sensor';

class MyComponent extends React.Component {
  onChange = (isVisible) => {
    console.log('Element is now %s', isVisible ? 'visible' : 'hidden');
  };

  render() {
    return (
      <VisibilitySensor onChange={this.onChange} partialVisibility>
        <div>
          This is my content
        </div>
      </VisibilitySensor>
    );
  }
}

export default MyComponent;
```

Delayed Visibility Detection

This feature allows you to add a delay before the visibility change is detected. By setting the `delay` prop, the `onChange` callback will be triggered after the specified delay in milliseconds.

```jsx
import React from 'react';
import VisibilitySensor from 'react-visibility-sensor';

class MyComponent extends React.Component {
  onChange = (isVisible) => {
    console.log('Element is now %s', isVisible ? 'visible' : 'hidden');
  };

  render() {
    return (
      <VisibilitySensor onChange={this.onChange} delay={500}>
        <div>
          This is my content
        </div>
      </VisibilitySensor>
    );
  }
}

export default MyComponent;
```

Other packages similar to react-visibility-sensor

react-intersection-observer

The react-intersection-observer package provides a React implementation of the Intersection Observer API, which allows you to observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. It is more flexible and performant compared to react-visibility-sensor, especially for complex visibility detection scenarios.

react-waypoint

The react-waypoint package allows you to execute a function whenever you scroll to an element. It is useful for triggering animations or loading content as the user scrolls. Compared to react-visibility-sensor, react-waypoint is more focused on scroll-based triggers and offers more control over when the callbacks are fired.

README

React Visibility Sensor

Sensor component for React that notifies you when it goes in or out of the window viewport.

Install

npm install react-visibility-sensor

Example

View the example

To run the example locally:

• npm run build-example
• open example/index.html in a browser

General usage goes something like:

function render () {
  var VisibilitySensor = require('react-visibility-sensor');

  var onChange = function (isVisible) {
    console.log('Element is now %s', isVisible ? 'visible' : 'hidden');
  };

  return (
    <VisibilitySensor onChange={onChange} />
  );
}

Props

• onChange: callback for whenever the element changes from being within the window viewport or not. Function is called with 1 argument (isVisible: boolean)
• active: (default true) boolean flag for enabling / disabling the sensor. When active !== true the sensor will not fire the onChange callback.
• partialVisibility: (default false) consider element visible if only part of it is visible.
• delay: (default 1000) integer, number of milliseconds between checking the element's position in relation the the window viewport. Making this number too low will have a negative impact on performance.
• containment: (optional) element to use as a viewport when checking visibility. Default behaviour is to use the browser window as viewport.

Thanks

Special thanks to contributors:

• @B-Stefan
• @kof
• @gaearon
• @kompot

License

MIT