react-intersection-observer - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

es/intersection.js

		@@ -82,3 +82,3 @@ "use strict";
		INSTANCE_MAP.forEach(function (item, key) {
		if (item.observerId === observerId && key !== element) {
		if (item && item.observerId === observerId && key !== element) {
		itemsLeft = true;
		@@ -85,0 +85,0 @@ }

lib/intersection.js

		@@ -82,3 +82,3 @@ "use strict";
		INSTANCE_MAP.forEach(function (item, key) {
		if (item.observerId === observerId && key !== element) {
		if (item && item.observerId === observerId && key !== element) {
		itemsLeft = true;
		@@ -85,0 +85,0 @@ }

package.json

		{
		"name": "react-intersection-observer",
		"version": "1.0.0",
		"version": "1.0.1",
		"description": "Monitor if a component is inside the viewport, using IntersectionObserver API",
		@@ -87,3 +87,3 @@ "main": "lib/index.js",
		"babel-core": "^6.25.0",
		"babel-jest": "^20.0.3",
		"babel-jest": "^21.0.0",
		"babel-preset-env": "^1.6.0",
		@@ -100,3 +100,3 @@ "babel-preset-react": "^6.24.1",
		"intersection-observer": "^0.4.0",
		"jest": "^20.0.4",
		"jest": "^21.0.0",
		"lint-staged": "^4.0.2",
		@@ -103,0 +103,0 @@ "prettier": "^1.5.3",

README.md

		@@ -51,2 +51,32 @@ # react-intersection-observer

		If you are using Webpack (or similar) you could use [dynamic imports](https://webpack.js.org/api/module-methods/#import-), to load the Polyfill only if needed.
		A basic implementation could look something like this:

		```js
		loadPolyfills()
		.then(() => /* Render React application now that your Polyfills are ready */)

		/**
		* Do feature detection, to figure out which polyfills needs to be imported.
		**/
		function loadPolyfills() {
		const polyfills = []

		if (!supportsIntersectionObserver()) {
		polyfills.push(import('intersection-observer'))
		}

		return Promise.all(polyfills)
		}

		function supportsIntersectionObserver() {
		return (
		'IntersectionObserver' in global &&
		'IntersectionObserverEntry' in global &&
		'intersectionRatio' in IntersectionObserverEntry.prototype
		)
		}

		```

		## Props
		@@ -70,3 +100,3 @@ The `<Observer />` accepts the following props:
		### Child as function
		The basic usage pass a function as the child. It will be called whenever the state changes, with the new value of `inView`.
		The default way to use the `Observer`, is to pass a function as the child. It will be called whenever the state changes, with the new value of `inView`.

		@@ -82,3 +112,3 @@ ```js
		### Render callback
		For simple usecases where you wan't to only render a component when it enters view, you can use the `render` prop.
		For simple use cases where you want to only render a component when it enters view, you can use the `render` prop.

		@@ -85,0 +115,0 @@ ```js

src/intersection.js

		@@ -73,3 +73,3 @@ const INSTANCE_MAP = new Map()
		INSTANCE_MAP.forEach((item, key) => {
		if (item.observerId === observerId && key !== element) {
		if (item && item.observerId === observerId && key !== element) {
		itemsLeft = true
		@@ -76,0 +76,0 @@ }

New alerts