Initial commit

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc

@@ -0,0 +1,8 @@
+{
+  "parser": "babel-eslint",
+  "extends": [
+    "eslint-config-fresh",
+    "eslint-config-fresh-react",
+    "eslint-config-fresh-react/jsx-a11y"
+  ]
+}

.gitignore

@@ -0,0 +1 @@
+node_modules

index.js

@@ -0,0 +1,67 @@
+'use strict';
+
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+
+export default class ViewportObserver extends React.Component {
+  static propTypes = {
+    onEnter    : PropTypes.func,
+    onLeave    : PropTypes.func,
+    root       : PropTypes.node.isRequired,
+    rootMargin : PropTypes.string,
+    threshold  : PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.arrayOf(PropTypes.number)
+    ]),
+    children : PropTypes.node.isRequired
+  };
+
+  static defaultProps = {
+    onEnter    : () => {},
+    onLeave    : () => {},
+    rootMargin : null,
+    threshold  : [0]
+  };
+
+  intersectionObserver;
+
+  element;
+
+  setElement(node) {
+    this.element = node;
+  }
+
+  componentDidMount() {
+    const { root, rootMargin, threshold } = this.props;
+
+    this.intersectionObserver = new IntersectionObserver(entries => {
+      if (entries.length === 0) {
+        return;
+      }
+
+      if (entries[0].intersectionRatio <= 0) {
+        this.props.onLeave();
+        return;
+      }
+
+      this.props.onEnter();
+    }, { root, rootMargin, threshold });
+
+    this.intersectionObserver.observe(this.element);
+  }
+
+  componentWillUnmount() {
+    if (this.intersectionObserver) {
+      this.intersectionObserver.unobserve(this.element);
+      this.intersectionObserver = null;
+    }
+  }
+
+  render() {
+    return (
+      <div ref={this.setElement} className="Waypoint">
+        {this.props.children}
+      </div>
+    );
+  }
+}

package.json

@@ -0,0 +1,36 @@
+{
+  "name": "viewport-observer",
+  "version": "0.0.0",
+  "description": "A React Component that detect element existence on viewport using IntersectionObserver",
+  "main": "index.js",
+  "scripts": {
+    "test": "eslint ."
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/openfresh/viewport-observer.git"
+  },
+  "keywords": [
+    "react"
+  ],
+  "author": "openfresh",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/openfresh/viewport-observer/issues"
+  },
+  "homepage": "https://github.com/openfresh/viewport-observer#readme",
+  "devDependencies": {
+    "babel-eslint": "^7.2.3",
+    "eslint": "^3.19.0",
+    "eslint-config-fresh": "^1.3.1",
+    "eslint-config-fresh-react": "^1.2.0",
+    "eslint-config-xo-react": "^0.12.0",
+    "eslint-config-xo-space": "^0.16.0",
+    "eslint-plugin-jsx-a11y": "^5.0.1",
+    "eslint-plugin-react": "^7.0.0"
+  },
+  "peerDependencies": {
+    "prop-types": "^15.5.9",
+    "react": "^15.5.4"
+  }
+}

readme.md

@@ -0,0 +1,48 @@
+# `ViewportObserver`
+
+[![Build Status](https://travis-ci.org/openfresh/viewport-observer.svg?branch=master)](https://travis-ci.org/openfresh/viewport-observer)
+[![devDependency Status](https://david-dm.org/openfresh/viewport-observer/dev-status.svg)](https://david-dm.org/openfresh/viewport-observer?type=dev)
+[![peerDependency Status](https://david-dm.org/openfresh/viewport-observer/peer-status.svg)](https://david-dm.org/openfresh/viewport-observer?type=peer)
+
+> A React Component that detect element existence on viewport using [`IntersectionObserver`](https://wicg.github.io/IntersectionObserver/)
+
+## Install
+
+```bash
+$ npm install --save viewport-observer
+```
+
+This package depends on [`IntersectionObserver`](https://wicg.github.io/IntersectionObserver/), You probably need to polyfill via [WICG/IntersectionObserver Polyfill](https://github.com/WICG/IntersectionObserver/tree/gh-pages/polyfill).
+
+## Usage
+
+```jsx
+import ViewportObserver from 'viewport-observer';
+
+...
+
+<ViewportObserver
+  onEnter={() => console.log('onEnter')}
+  onLeave={() => console.log('onLeave')}
+/>
+
+<ViewportObserver
+  onEnter={() => console.log('onEnter')}
+  onLeave={() => console.log('onLeave')}>
+  <div>{/* ... */}</div>
+</ViewportObserver>
+```
+
+## Config
+
+|  Property  |     |
+| ---------- | --- |
+| onEnter    | Call on enter to viewport  |
+| onLeave    | Call on leave from viewport |
+| root       |     |
+| rootMargin |     |
+| threshold  |     |
+
+## License
+
+MIT © [FRESH!](https://github.com/openfresh)