• Stars
    star
    2,322
  • Rank 19,825 (Top 0.4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 10 years ago
  • Updated 7 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

React Visibility Sensor

Build Status

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

Sponsored by X-Team

Install

npm install react-visibility-sensor

Including the script directly

Useful if you want to use with bower, or in a plain old <script> tag.

In this case, make sure that React and ReactDOM are already loaded and globally accessible.

Take a look at the umd example to see this in action

Example

View an example on codesandbox

Or if you'd like to try building an example yourself locally, here's another:

View the example

To run the example locally:

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

General usage goes something like:

const VisibilitySensor = require('react-visibility-sensor');

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

function MyComponent (props) {
  return (
    <VisibilitySensor onChange={onChange}>
      <div>...content goes here...</div>
    </VisibilitySensor>
  );
}

You can also pass a child function, which can be convenient if you don't need to store the visibility anywhere:

function MyComponent (props) {
  return (
    <VisibilitySensor>
      {({isVisible}) =>
        <div>I am {isVisible ? 'visible' : 'invisible'}</div>
      }
    </VisibilitySensor>
  );
}

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. Also possible values are - 'top', 'right', 'bottom', 'left' - in case it's needed to detect when one of these become visible explicitly.
  • offset: (default {}) with offset you can define amount of px from one side when the visibility should already change. So in example setting offset={{top:10}} means that the visibility changes hidden when there is less than 10px to top of the viewport. Offset works along with partialVisibility
  • minTopValue: (default 0) consider element visible if only part of it is visible and a minimum amount of pixels could be set, so if at least 100px are in viewport, we mark element as visible.
  • intervalCheck: (default true) when this is true, it gives you the possibility to check if the element is in view even if it wasn't because of a user scroll
  • intervalDelay: (default 100) 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.
  • scrollCheck: (default: false) by making this true, the scroll listener is enabled.
  • scrollDelay: (default: 250) is the debounce rate at which the check is triggered. Ex: 250ms after the user stopped scrolling.
  • scrollThrottle: (default: -1) by specifying a value > -1, you are enabling throttle instead of the delay to trigger checks on scroll event. Throttle supercedes delay.
  • resizeCheck: (default: false) by making this true, the resize listener is enabled. Resize listener only listens to the window.
  • resizeDelay: (default: 250) is the debounce rate at which the check is triggered. Ex: 250ms after the user stopped resizing.
  • resizeThrottle: (default: -1) by specifying a value > -1, you are enabling throttle instead of the delay to trigger checks on resize event. Throttle supercedes delay.
  • containment: (optional) element to use as a viewport when checking visibility. Default behaviour is to use the browser window as viewport.
  • delayedCall: (default false) if is set to true, wont execute on page load ( prevents react apps triggering elements as visible before styles are loaded )
  • children: can be a React element or a function. If you provide a function, it will be called with 1 argument {isVisible: ?boolean, visibilityRect: Object}

It's possible to use both intervalCheck and scrollCheck together. This means you can detect most visibility changes quickly with scrollCheck, and an intervalCheck with a higher intervalDelay will act as a fallback for other visibility events, such as resize of a container.

Thanks

Special thanks to contributors

License

MIT

More Repositories

1

json-mode

Major mode for editing JSON files with emacs
Emacs Lisp
292
star
2

ffprobe-static

Static binaries for ffprobe
JavaScript
52
star
3

knowledge

50
star
4

css-modules-starter-kit

Get started with CSS Modules
JavaScript
38
star
5

statelet

Little state objects for javascript
JavaScript
26
star
6

electron-clipboard-watcher

Poll the system clipboard for text / image changes
JavaScript
21
star
7

cmz

Same great CSS Modules taste, Zero sugar.
JavaScript
19
star
8

facebubble

put your face in a bubble for screencasts and whatnot
JavaScript
18
star
9

cascading-java-scripts

17
star
10

6-ways-to-win

Slides from http://2016.cssconf.com.au/
JavaScript
14
star
11

workerize-example

Example of converting a module to a web-worker in electron
JavaScript
13
star
12

choonz

πŸš‚ Kick back and put some choonz on
JavaScript
12
star
13

cmify

A node-first approach to CSS Modules, so you can use CSS Modules on the server without any extra tools.
JavaScript
11
star
14

react-up

Whip up a react component for quick standalone display
JavaScript
10
star
15

name-lint

Check directories and files for naming consistency.
JavaScript
9
star
16

monobrow

browserify, with opinions
JavaScript
8
star
17

drx

declarative react experiments
JavaScript
8
star
18

synthland

✈️ Book a one-way ticket to the land of synth πŸ”
JavaScript
7
star
19

dotemacs

Emacs Lisp
7
star
20

codemirror-example

Example of a markdown editor with CodeMirror
HTML
7
star
21

snapnode

run your node in snapshot mode
JavaScript
5
star
22

react-plain-table

General-purpose table presentation component for React.
JavaScript
5
star
23

style-attr

Parse and stringify style attributes
JavaScript
5
star
24

flickr-photos

Example javascript, pulling photos from flickr by tag
JavaScript
4
star
25

electron-start

Start a js app
JavaScript
4
star
26

react-checkboxlist

React component to create a list of checkboxes.
JavaScript
3
star
27

hot-pockets

πŸ”₯ Little hot-loading pockets of javascript πŸ”₯
JavaScript
3
star
28

electron-run-in-browser

electron helper: run some js in a BrowserWindow and get the result
JavaScript
3
star
29

img2md

Detect images in the clipboard and paste them in your markdown file.
JavaScript
3
star
30

marki-journal

POC for a marki-style journal
JavaScript
2
star
31

monobrow-todomvc

JavaScript
2
star
32

wakit

Webaudio Kit: some useful functions
JavaScript
2
star
33

drumtoy

Very simple drum machine
JavaScript
2
star
34

minimatch-all

Match a path against multiple patterns.
JavaScript
2
star
35

beat-emitter

WebAudio scheduler with an event emitter
JavaScript
2
star
36

react-input-handler-example

Quick example using https://github.com/rmariuzzo/react-input-handler
JavaScript
2
star
37

gatsby-plugin-cmz

Gatsby plugin to inline any cmz styles used in the initial render.
JavaScript
2
star
38

electron-timelapse

Take one desktop screenshot every minute
HTML
2
star
39

react-starter

Learn to build a react UI piece by piece
JavaScript
1
star
40

md-to-html

JavaScript
1
star
41

css-modules-with-flow

Quick demo of using css-modulesify and flow typechecking
JavaScript
1
star
42

takeamemo

Take notes while you work.
JavaScript
1
star
43

md-sections

Get an array of sections (heading + nodes) from a markdown doc, using remark
JavaScript
1
star
44

pipe-to-logzio

Pipe console output to logz.io
JavaScript
1
star
45

linemap

JavaScript
1
star
46

hammerspoon-config

Hammerspoon config
Lua
1
star
47

pull-async-values

Create a pull-stream values source from an async function
JavaScript
1
star
48

words

1
star
49

slack-gh-stats

JavaScript
1
star
50

noise-explorer

πŸ§™β€β™‚οΈ Go on a journey through a land of noise πŸ—Ί
JavaScript
1
star
51

x-bin

Like pastebin, but whitelabeled and more profesh.
JavaScript
1
star
52

watch-json

Module and cli that watches a json file and emits an object when it changes.
JavaScript
1
star
53

babel-plugin-cmz-names

Babel plugin to give cmz nice readable classnames in dev
JavaScript
1
star
54

strapi-exporter

Export content from a Strapi CMS
JavaScript
1
star
55

autobabel

Zero-install babel dev environment.
JavaScript
1
star
56

toc

JS Table of contents generator
JavaScript
1
star
57

werds

JavaScript
1
star
58

neat-starter

HTML
1
star
59

draft-example

JavaScript
1
star
60

bind-fn

Very small module to make binding functions easier.
JavaScript
1
star