react-intersection-observer - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

package.json

 {
   "name": "react-intersection-observer",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Monitor if a component is inside the viewport, using IntersectionObserver API",
   "main": "lib/index.js",
+  "browser": "lib/Observer.js",
   "author": "Daniel Schmidt",
@@ -20,3 +21,3 @@ "repository": {
   "scripts": {
-    "build:lib": "NODE_ENV=development babel src --out-dir lib",
+    "build:lib": "rm -rf lib && NODE_ENV=development babel src --out-dir lib",
     "build:storybook": "build-storybook --output-dir example",
@@ -51,3 +52,3 @@ "deploy": "npm run build:storybook && git-directory-deploy --directory example --branch gh-pages",
   "jest": {
-    "testEnvironment": "jsdom",
+    "testEnvironment": "node",
     "snapshotSerializers": [
@@ -54,0 +55,0 @@ "<rootDir>/node_modules/enzyme-to-json/serializer"

README.md

@@ -92,1 +92,9 @@ # react-intersection-observer
 ```
+
+### Universal rendering
+The IntersectionObserver polyfill requires `window` and `document`, and will crash if you try to import it outside the browser. 
+To allow the Observer to be rendered universally, it sets `global.window` and `global.document` to empty objects if they are not defined.
+
+Ideally you would **noop** the IntersectionObserver when rendering outside the browser, but to make integration easier i've included the hack in the module.
+
+It could potentially conflict with other modules that checks for the existence of `window` and `document`. You can always require `lib/Observer.js` directly, to skip the window check. `lib/Observer.js` is also set as the `"browser"` field.

src/index.js

@@ -1,100 +0,4 @@
-import React, { Component, createElement } from 'react' // eslint-disable-line no-unused-vars
-import PropTypes from 'prop-types'
-import { observe, unobserve } from './intersection'
+import './window'
+import Observer from './Observer'
 
-const isFunction = func => typeof func === 'function'
-
-/**
- * Monitors scroll, and triggers the children function with updated props
- *
- <Observer>
-   {inView => (
-     <h1>{`${inView}`}</h1>
-   )}
- </Observer>
- */
-class Observer extends Component {
-  static propTypes = {
-    /** Element tag to use for the wrapping */
-    tag: PropTypes.node,
-    /** Children should be either a function or a node */
-    children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-    /** Only trigger this method once */
-    triggerOnce: PropTypes.bool,
-    /** Number between 0 and 1 indicating the the percentage that should be visible before triggering */
-    threshold: PropTypes.number,
-    /** Call this function whenever the in view state changes */
-    onChange: PropTypes.func,
-    /** Use render method to only render content when inView */
-    render: PropTypes.func,
-  }
-
-  static defaultProps = {
-    tag: 'div',
-    threshold: 0,
-    triggerOnce: false,
-  }
-
-  state = {
-    inView: false,
-  }
-
-  componentWillUpdate(nextProps, nextState) {
-    if (!!this.props.onChange && nextState.inView !== this.state.inView) {
-      this.props.onChange(nextState.inView)
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.node) {
-      unobserve(this.node)
-      this.node = null
-    }
-  }
-
-  node = null
-
-  handleNode = node => {
-    if (this.node) unobserve(this.node)
-    if (node) {
-      observe(
-        node,
-        this.handleChange,
-        this.props.triggerOnce,
-        this.props.threshold,
-      )
-    }
-    this.node = node
-  }
-
-  handleChange = inView => {
-    this.setState({ inView })
-  }
-
-  render() {
-    const {
-      children,
-      render,
-      tag,
-      triggerOnce,
-      threshold,
-      ...props
-    } = this.props
-    const { inView } = this.state
-
-    return createElement(
-      tag,
-      {
-        ...props,
-        ref: this.handleNode,
-      },
-      // If render is a function, use it to render content when in view
-      inView && isFunction(render) ? render() : null,
-      // If children is a function, render it with the current inView status.
-      // Otherwise always render children. Assume onChange is being used outside, to control the the state of children.
-      isFunction(children) ? children(inView) : children,
-    )
-  }
-}
-
 export default Observer

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1834428

increased by656.85%

Number of package files

20

increased by33.33%

Lines of code

7354

increased by2272.26%

Number of lines in readme file

99

increased by7.61%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes