feat(hooks): Hooks (#131)

* Add useIntersectionObserver hook

It has almost the same api and reuses types
It has tests and stories
Migrate to ts
Extracted common types
Fixed some type flaws in observer.ts
Added myself to AUTHORS

* Review fixes

* Increase code coverage

* Fix storybook import paths for babel transforms

Co-authored-by: Luis Merino <[email protected]>

Author: saitonakamura

AUTHORS

@@ -1 +1,2 @@
-Luis Merino <[email protected]>
+Luis Merino <[email protected]>
+Michael Bashurov <[email protected]>

docs/docs/components/HigherOrderComponent/WithIntersectionObserver.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import Observer from '../../../..';
+import Observer from '../../../../lib/es/src';
 
 export default (threshold) => (BaseComponent) => {
     const displayName =

docs/docs/components/Hook/Hook.js

@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+import { useIntersectionObserver } from '../../../../lib/es/src';
+
+const Hook = () => {
+    const [visibility, setVisibility] = useState('invisible');
+
+    const handleChange = (entry) => {
+        setVisibility(entry.isIntersecting ? 'visible' : 'invisible');
+    };
+
+    const [ref] = useIntersectionObserver(handleChange);
+
+    return (
+        <div>
+            <div className={`header ${visibility}`}>{visibility}</div>
+            <div className="body">
+                <div ref={ref} className={`box ${visibility}`} />
+            </div>
+        </div>
+    );
+};
+
+export default Hook;

docs/docs/components/Hook/README.md

@@ -0,0 +1,32 @@
+Basic usage of **useIntersectionObserver** hook that changes the className of
+the observed **<div />** element when the visibility changes:
+
+**useIntersectionObserver** have almost the same options as **<Observer />**
+element, except **onChange** handler comes as a first argument and every other
+option (root, threshold, rootMargin etc.) are second argument
+
+```jsx
+import React, { useState } from 'react';
+import { useIntersectionObserver } from '@researchgate/react-intersection-observer';
+
+const Hook = () => {
+  const [visibility, setVisibility] = useState('invisible');
+
+  const handleChange = (entry) => {
+    setVisibility(entry.isIntersecting ? 'visible' : 'invisible');
+  };
+
+  const [ref] = useIntersectionObserver(handleChange, { threshold: 0 });
+
+  return (
+    <div>
+      <div className={`header ${visibility}`}>{visibility}</div>
+      <div className="body">
+        <div ref={ref} className={`box ${visibility}`} />
+      </div>
+    </div>
+  );
+};
+
+export default Hook;
+```

docs/docs/components/Hook/index.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import withReadme from 'storybook-readme/with-readme';
+import Readme from './README.md';
+import Hook from './Hook';
+
+export default withReadme(Readme, () => <Hook />);

docs/docs/components/HookOnlyOnce/HookOnlyOnce.js

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import { useIntersectionObserver } from '../../../../lib/es/src';
+
+const HookOnlyOnce = () => {
+    const [visibility, setVisibility] = useState('invisible');
+
+    const handleChange = (entry, unobserve) => {
+        if (entry.isIntersecting) {
+            setVisibility('visible');
+            unobserve();
+        }
+    };
+
+    const [ref] = useIntersectionObserver(handleChange);
+
+    return (
+        <div>
+            <div className={`header ${visibility}`}>{visibility}</div>
+            <div className="body">
+                <div ref={ref} className={`box ${visibility}`} />
+            </div>
+        </div>
+    );
+};
+
+export default HookOnlyOnce;

docs/docs/components/HookOnlyOnce/README.md

@@ -0,0 +1,32 @@
+
+_Use the second argument of `onChange(event, unobserve)` to customize how you prefer to stop observing the target. You
+can also set the prop `disabled: true` in the options to achieve the same effect._
+
+```jsx
+import React, { useState } from 'react';
+import { useIntersectionObserver } from '@researchgate/react-intersection-observer';
+
+const HookOnlyOnce = () => {
+    const [visibility, setVisibility] = useState('invisible');
+
+    const handleChange = (entry, unobserve) => {
+        if (entry.isIntersecting) {
+            setVisibility('visible');
+            unobserve();
+        }
+    };
+
+    const [ref] = useIntersectionObserver(handleChange);
+
+    return (
+        <div>
+            <div className={`header ${visibility}`}>{visibility}</div>
+            <div className="body">
+                <div ref={ref} className={`box ${visibility}`} />
+            </div>
+        </div>
+    );
+};
+
+export default HookOnlyOnce;
+```

docs/docs/components/HookOnlyOnce/index.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import withReadme from 'storybook-readme/with-readme';
+import Readme from './README.md';
+import HookOnlyOnce from './HookOnlyOnce';
+
+export default withReadme(Readme, () => <HookOnlyOnce />);

docs/docs/components/ImpressionTracking/AdImpression.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { action } from '@storybook/addon-actions';
-import Observer from '../../../..';
+import Observer from '../../../../lib/es/src';
 
 const tracked = action('tracked');
 

docs/docs/components/OnlyOnce/OnlyOnce.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { decorateAction } from '@storybook/addon-actions';
-import Observer from '../../../..';
+import Observer from '../../../../lib/es/src';
 
 const storyBookAction = decorateAction([
     (args) =>