Add intersection hook

Author: tuxsudo

package.json

@@ -15,6 +15,8 @@
     "styled-components": "^4.1.2"
   },
   "devDependencies": {
+    "@babel/plugin-syntax-jsx": "^7.2.0",
+    "@storybook/addon-actions": "^4.1.1",
     "@storybook/core": "^4.1.1",
     "@storybook/react": "^4.1.1",
     "@types/react": "16.7",
@@ -28,7 +30,7 @@
     "eslint-plugin-react": "^7.11.1",
     "ncc": "^0.3.6",
     "prettier": "^1.15.3",
-    "react-hot-loader": "^4.6.0",
+    "shx": "^0.3.2",
     "typescript": "^3.2.2",
     "typescript-eslint-parser": "^21.0.2"
   }

packages/focus-hook/.storybook/addons.js

@@ -0,0 +1 @@
+import "@storybook/addon-actions/register";

packages/focus-hook/.storybook/config.js

@@ -1,5 +1,5 @@
 import { configure } from "@storybook/react";
-import { setConfig } from 'react-hot-loader';
+import { setConfig } from "react-hot-loader";
 
 setConfig({ pureSFC: true });
 
@@ -8,15 +8,3 @@ function loadStories() {
 }
 
 configure(loadStories, module);
-
-/*
-import { configure } from "@storybook/react";
-
-const req = require.context("../src", true, /story.js$/);
-
-function loadStories() {
-  req.keys().forEach(req);
-}
-
-configure(loadStories, module);
-*/

packages/focus-hook/package.json

@@ -4,8 +4,10 @@
   "main": "dist/index.js",
   "license": "MIT",
   "scripts": {
-    "build": "ncc build -e react -e styled-components src/index.tsx",
-    "storybook": "start-storybook -p 6006 -c .storybook"
+    "build": "ncc build -e react src/index.tsx",
+    "prestorybook": "shx rm -rf \"../../node_modules/@storybook/react/node_modules/react*\"",
+    "storybook": "start-storybook -p 6006 -c .storybook",
+    "clean": "shx rm -rf dist"
   },
   "peerDependencies": {
     "react": "^16.7.0-alpha.2",

packages/intersection-hook/.storybook/addons.js

@@ -0,0 +1 @@
+import "@storybook/addon-actions/register";

packages/intersection-hook/.storybook/config.js

@@ -0,0 +1,7 @@
+import { configure } from "@storybook/react";
+
+function loadStories() {
+  require("../src/story.tsx");
+}
+
+configure(loadStories, module);

packages/intersection-hook/.storybook/webpack.config.js

@@ -0,0 +1,12 @@
+// import { setConfig } from 'react-hot-loader';
+// setConfig({ pureSFC: true });
+
+module.exports = (baseConfig, env, config) => {
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    loader: require.resolve("awesome-typescript-loader")
+  });
+  // config.plugins.push(new TSDocgenPlugin()); // optional
+  config.resolve.extensions.push(".ts", ".tsx");
+  return config;
+};

packages/intersection-hook/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@tuxsudo/intersection-hook",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "scripts": {
+    "build": "ncc build -e react src/index.tsx",
+    "prestorybook": "shx rm -rf \"../../node_modules/@storybook/react/node_modules/react*\"",
+    "storybook": "start-storybook -p 6006 -c .storybook",
+    "clean": "shx rm -rf dist"
+  },
+  "peerDependencies": {
+    "react": "^16.7.0-alpha.2",
+    "react-dom": "^16.7.0-alpha.2"
+  },
+  "dependencies": {
+    "resize-observer-polyfill": "^1.5.1"
+  }
+}

packages/intersection-hook/readme.md

@@ -0,0 +1,15 @@
+# React Intersect Observer Hook
+
+```jsx
+import useIntersection from "@tuxsudo/intersection-hook";
+
+export function Elm() {
+  const { ref, entry } = useIntersection();
+
+  return (
+    <div ref={ref}>
+      {entry && entry.isIntersecting ? "can see me" : "can't see me"}
+    </div>
+  );
+}
+```

packages/intersection-hook/src/index.tsx

@@ -0,0 +1,60 @@
+import { useState, useEffect, useRef, MutableRefObject } from "react";
+import ResizeObserver from "resize-observer-polyfill";
+
+/* https://github.com/Microsoft/TypeScript/issues/16255 */
+declare global {
+  interface Window {
+    IntersectionObserver: typeof IntersectionObserver;
+  }
+}
+
+export interface IntersectionHandler {
+  (entry: ResizeObserverEntry): void;
+}
+
+export interface UseIntersectionArgs {
+  root?: HTMLElement;
+  rootMargin?: string;
+  threshold?: number;
+  onChange?: (entry: IntersectionObserverEntry) => void;
+}
+
+export default function useIntersection(
+  args: UseIntersectionArgs
+): {
+  entry: IntersectionObserverEntry | null;
+  ref: MutableRefObject<any>;
+} {
+  const ref = useRef(null);
+  const [entry, setEntry] = useState(null);
+
+  const handleIntersection = ([newEntry]) => {
+    setEntry(newEntry);
+
+    if (args.onChange) {
+      args.onChange(newEntry);
+    }
+  };
+
+  const observer = useRef(
+    window && window.IntersectionObserver
+      ? new window.IntersectionObserver(handleIntersection, {
+          root: args.root,
+          rootMargin: args.rootMargin,
+          threshold: args.threshold
+        })
+      : null
+  );
+
+  useEffect(
+    () => {
+      if (ref && window && window.IntersectionObserver) {
+        observer.current.observe(ref.current);
+      }
+      return () => observer.current.disconnect();
+    },
+    [ref]
+  );
+
+  return { entry, ref };
+}

packages/intersection-hook/src/story.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+
+import styled from "styled-components";
+
+import useIntersection from "./index";
+
+const story = storiesOf("Intersection Hook", module);
+
+const Hud = styled.div`
+  background: white;
+  border-top: 1px solid #3e3e3e;
+  bottom: 0;
+  font-size: 2rem;
+  left: 0;
+  right: 0;
+  opacity: 0.95;
+  padding: 1rem;
+  position: fixed;
+`;
+
+const Filler = styled.p`
+  margin: 0;
+  font-size: 4rem;
+
+  & > :not(:last-child) {
+    margin-bottom: 1rem;
+  }
+`;
+
+const Pre = styled.pre`
+  padding: 1rem;
+  background: #c0c0c0;
+`;
+
+function Demo({
+  disableLogging,
+  disableHud
+}: {
+  disableLogging?: boolean;
+  disableHud?: boolean;
+}) {
+  const { ref, entry } = useIntersection({
+    onChange: !disableLogging
+      ? entry =>
+          action("Intersect")({
+            boundingClientRect: entry.boundingClientRect,
+            isIntersecting: entry.isIntersecting
+          })
+      : undefined
+  });
+
+  return (
+    <React.Fragment>
+      {!disableHud && (
+        <Hud>
+          {entry && entry.isIntersecting
+            ? "✅ is in view"
+            : "🚫 is not in view"}
+        </Hud>
+      )}
+      <Filler>
+        Pariatur laboris velit pariatur cupidatat consequat officia proident
+        dolor. Pariatur non nulla excepteur esse elit labore consequat irure
+        voluptate sint labore. Anim cupidatat cupidatat sint ut sunt esse
+        consectetur cillum elit anim. Fugiat ut non est incididunt in anim
+        nostrud ullamco.
+      </Filler>
+      <Filler>
+        Ex nulla non ex id officia dolor. Voluptate duis ad excepteur
+        adipisicing. Est nostrud commodo adipisicing ullamco anim consequat
+        eiusmod. Minim nulla Lorem cillum sint duis in laboris nostrud
+        voluptate. Cillum irure culpa mollit sit.
+      </Filler>
+      <Pre ref={ref}>
+        {entry && JSON.stringify(entry.boundingClientRect, null, 2)}
+      </Pre>
+      <Filler>
+        Pariatur laboris velit pariatur cupidatat consequat officia proident
+        dolor. Pariatur non nulla excepteur esse elit labore consequat irure
+        voluptate sint labore. Anim cupidatat cupidatat sint ut sunt esse
+        consectetur cillum elit anim. Fugiat ut non est incididunt in anim
+        nostrud ullamco.
+      </Filler>
+      <Filler>
+        Ex nulla non ex id officia dolor. Voluptate duis ad excepteur
+        adipisicing. Est nostrud commodo adipisicing ullamco anim consequat
+        eiusmod. Minim nulla Lorem cillum sint duis in laboris nostrud
+        voluptate. Cillum irure culpa mollit sit.
+      </Filler>
+    </React.Fragment>
+  );
+}
+
+story.add("hud", () => <Demo disableLogging />);
+story.add("logger", () => <Demo disableHud />);

packages/resize-hook/.storybook/addons.js

@@ -0,0 +1 @@
+import "@storybook/addon-actions/register";

packages/resize-hook/.storybook/config.js

@@ -1,22 +1,7 @@
 import { configure } from "@storybook/react";
-import { setConfig } from 'react-hot-loader';
-
-setConfig({ pureSFC: true });
 
 function loadStories() {
   require("../src/story.tsx");
 }
 
 configure(loadStories, module);
-
-/*
-import { configure } from "@storybook/react";
-
-const req = require.context("../src", true, /story.js$/);
-
-function loadStories() {
-  req.keys().forEach(req);
-}
-
-configure(loadStories, module);
-*/

packages/resize-hook/package.json

@@ -4,8 +4,10 @@
   "main": "dist/index.js",
   "license": "MIT",
   "scripts": {
-    "build": "ncc build -e react -e styled-components src/index.tsx",
-    "storybook": "start-storybook -p 6006 -c .storybook"
+    "build": "ncc build -e react src/index.tsx",
+    "prestorybook": "shx rm -rf \"../../node_modules/@storybook/react/node_modules/react*\"",
+    "storybook": "start-storybook -p 6006 -c .storybook",
+    "clean": "shx rm -rf dist"
   },
   "peerDependencies": {
     "react": "^16.7.0-alpha.2",

packages/resize-hook/readme.md

@@ -4,12 +4,8 @@
 import useResize from "@tuxsudo/resize-hook";
 
 export function Elm() {
-  const { ref, entry } = useResize();
+  const { ref, entry } = useResize({ onResize: console.log });
 
-  return (
-    <div ref={ref}>
-      {entry && <span>{entry.contentRect.width}</span>}
-    </div>
-  );
+  return <div ref={ref}>{entry && <span>{entry.contentRect.width}</span>}</div>;
 }
 ```

packages/resize-hook/src/index.tsx

@@ -1,7 +1,13 @@
 import { useState, useEffect, useRef, MutableRefObject } from "react";
 import ResizeObserver from "resize-observer-polyfill";
 
-export default function useResize(): {
+export interface ResizeHandler {
+  (entry: ResizeObserverEntry): void;
+}
+
+export default function useResize({
+  onResize
+}: { onResize?: ResizeHandler } = {}): {
   entry: ResizeObserverEntry | null;
   ref: MutableRefObject<any>;
 } {
@@ -10,6 +16,9 @@ export default function useResize(): {
 
   const handleResize = ([entry]) => {
     setEntry(entry);
+    if (onResize) {
+      onResize(entry);
+    }
   };
 
   const observer = useRef(new ResizeObserver(handleResize));

packages/resize-hook/src/story.tsx

@@ -1,17 +1,19 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
 
 import useResize from "./index";
 
+const story = storiesOf("Resize Hook", module);
+
 function Demo() {
-  const { ref, entry } = useResize();
+  const { ref, entry } = useResize({
+    onResize: entry => action("resize")(entry.contentRect)
+  });
 
   return (
-    <pre ref={ref}>
-      {entry ? entry.contentRect.width : "?"}x
-      {entry ? entry.contentRect.height : "?"}
-    </pre>
+    <pre ref={ref}>{entry && JSON.stringify(entry.contentRect, null, 2)}</pre>
   );
 }
 
-storiesOf("Resize Hook", module).add("default", () => <Demo />);
+story.add("default", () => <Demo />);