Merge remote-tracking branch 'origin/master'

package.json

@@ -2,16 +2,12 @@
   "name": "react-intersection-observer",
   "version": "8.22.6",
   "description": "Monitor if a component is inside the viewport, using IntersectionObserver API",
-  "main": "dist/react-intersection-observer.cjs.js",
-  "module": "dist/react-intersection-observer.esm.js",
-  "unpkg": "dist/react-intersection-observer.umd.min.js",
-  "typings": "dist/index.d.ts",
+  "main": "react-intersection-observer.cjs.js",
+  "module": "react-intersection-observer.esm.js",
+  "unpkg": "react-intersection-observer.umd.min.js",
+  "typings": "index.d.ts",
   "author": "Daniel Schmidt",
-  "files": [
-    "dist/*",
-    "test-utils.js",
-    "test-utils.d.ts"
-  ],
+  "private": true,
   "repository": {
     "type": "git",
     "url": "https://github.com/thebuilder/react-intersection-observer.git"
@@ -49,6 +45,7 @@
     "build": "run-s build:*",
     "build:lib": "rollup -c",
     "build:ts": "tsc -p tsconfig.build.json && tsc -p tsconfig.test.json",
+    "build:copy": "copyfiles -f package.json README.md LICENSE dist && json -I -f dist/package.json -e \"this.private=false; this.devDependencies=undefined; this.optionalDependencies=undefined; this.scripts=undefined; this.husky=undefined; this.prettier=undefined; this.jest=undefined; this.eslintConfig=undefined; this.eslintIgnore=undefined; this.np=undefined;\"",
     "dev": "concurrently -k -r 'jest --watch' 'yarn run storybook'",
     "lint": "eslint . --ext js,ts,tsx",
     "preversion": "yarn build",
@@ -57,6 +54,9 @@
     "storybook:build": "build-storybook --output-dir example",
     "test": "jest"
   },
+  "np": {
+    "contents": "dist"
+  },
   "husky": {
     "hooks": {
       "pre-commit": "tsc && lint-staged"
@@ -106,7 +106,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
-    "invariant": "^2.0.0"
+    "invariant": "^2.2.4"
   },
   "peerDependencies": {
     "react": "^15.0.0 || ^16.0.0 || ^17.0.0"
@@ -136,6 +136,7 @@
     "babel-jest": "^24.5.0",
     "babel-loader": "^8.0.5",
     "concurrently": "^4.1.0",
+    "copyfiles": "^2.1.0",
     "coveralls": "^3.0.3",
     "eslint": "^5.15.2",
     "eslint-config-react-app": "^4.0.0",
@@ -148,6 +149,7 @@
     "intersection-observer": "^0.6.0",
     "jest": "^24.5.0",
     "jest-dom": "^3.1.3",
+    "json": "^9.0.6",
     "lint-staged": "^8.1.5",
     "npm-run-all": "^4.1.5",
     "prettier": "^1.16.2",

rollup.config.js

@@ -26,7 +26,7 @@ const getBabelOptions = ({ useESModules }) => ({
 export default [
   {
     input: './src/index.tsx',
-    output: { file: pkg.module, format: 'esm', exports: 'named' },
+    output: { file: 'dist/' + pkg.module, format: 'esm', exports: 'named' },
     external,
     plugins: [
       resolve({ extensions }),
@@ -35,7 +35,7 @@ export default [
   },
   {
     input: './src/index.tsx',
-    output: { file: pkg.main, format: 'cjs', exports: 'named' },
+    output: { file: 'dist/' + pkg.main, format: 'cjs', exports: 'named' },
     external,
     plugins: [
       resolve({ extensions }),
@@ -45,7 +45,7 @@ export default [
   {
     input: './src/index.tsx',
     output: {
-      file: pkg.unpkg,
+      file: 'dist/' + pkg.unpkg,
       format: 'umd',
       name: 'ReactIntersectionObserver',
       globals,

src/InView.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import invariant from 'invariant'
 import { observe, unobserve } from './intersection'
-import { IntersectionObserverProps, PlainChildrenProps } from './typings/types'
+import { IntersectionObserverProps, PlainChildrenProps } from './index'
 
 type State = {
   inView: boolean

src/index.tsx

@@ -1,5 +1,73 @@
+import * as React from 'react'
 import { InView } from './InView'
+
 export { InView } from './InView'
 export { useInView } from './useInView'
-
 export default InView
+
+type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
+
+export type ObserverInstanceCallback = (
+  inView: boolean,
+  intersection: IntersectionObserverEntry,
+) => void
+
+export type ObserverInstance = {
+  callback: ObserverInstanceCallback
+  element: Element
+  inView: boolean
+  observerId: string
+  observer: IntersectionObserver
+  thresholds: number[]
+}
+
+interface RenderProps {
+  inView: boolean
+  entry: IntersectionObserverEntry | undefined
+  ref: React.RefObject<any> | ((node?: Element | null) => void)
+}
+
+export interface IntersectionOptions extends IntersectionObserverInit {
+  /** Only trigger the inView callback once */
+  triggerOnce?: boolean
+}
+
+export interface IntersectionObserverProps extends IntersectionOptions {
+  /**
+   * Children expects a function that receives an object
+   * contain an `inView` boolean and `ref` that should be
+   * assigned to the element root.
+   */
+  children: (fields: RenderProps) => React.ReactNode
+
+  /** Call this function whenever the in view state changes */
+  onChange?: (inView: boolean, entry: IntersectionObserverEntry) => void
+}
+
+/**
+ * Types specific to the PlainChildren rendering of InView
+ * */
+export type PlainChildrenProps = IntersectionOptions & {
+  children: React.ReactNode
+
+  /**
+   * Render the wrapping element as this element.
+   * @default `'div'`
+   */
+  as?: React.ReactType<any>
+
+  /**
+   * Element tag to use for the wrapping component
+   * @deprecated Replace with the 'as' prop
+   */
+  tag?: React.ReactType<any>
+
+  /** Call this function whenever the in view state changes */
+  onChange?: (inView: boolean, entry: IntersectionObserverEntry) => void
+} & Omit<React.HTMLProps<HTMLElement>, 'onChange'>
+
+export type InViewHookResponse = [
+  ((node?: Element | null) => void),
+  boolean,
+  IntersectionObserverEntry | undefined
+]

src/intersection.ts

@@ -1,18 +1,5 @@
 import invariant from 'invariant'
-
-type Callback = (
-  inView: boolean,
-  intersection: IntersectionObserverEntry,
-) => void
-
-export type ObserverInstance = {
-  callback: Callback
-  element: Element
-  inView: boolean
-  observerId: string
-  observer: IntersectionObserver
-  thresholds: number[]
-}
+import { ObserverInstance, ObserverInstanceCallback } from './index'
 
 const INSTANCE_MAP: Map<Element, ObserverInstance> = new Map()
 const OBSERVER_MAP: Map<string, IntersectionObserver> = new Map()
@@ -43,7 +30,7 @@ function getRootId(root?: Element | null) {
  */
 export function observe(
   element: Element,
-  callback: Callback,
+  callback: ObserverInstanceCallback,
   options: IntersectionObserverInit = {},
 ) {
   // IntersectionObserver needs a threshold to trigger, so set it to 0 if it's not defined.

src/useInView.tsx

@@ -1,14 +1,16 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import * as React from 'react'
 import { observe, unobserve } from './intersection'
-import { HookResponse, IntersectionOptions } from './typings/types'
+import { InViewHookResponse, IntersectionOptions } from './index'
 
 type State = {
   inView: boolean
   entry?: IntersectionObserverEntry
 }
 
-export function useInView(options: IntersectionOptions = {}): HookResponse {
+export function useInView(
+  options: IntersectionOptions = {},
+): InViewHookResponse {
   const [ref, setRef] = React.useState<Element | null | undefined>(null)
   const [state, setState] = React.useState<State>({
     inView: false,

stories/Hooks.story.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react'
 import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
-import { useInView } from '../src/index'
+import { IntersectionOptions, useInView } from '../src/index'
 import ScrollWrapper from './ScrollWrapper/index'
 import { CSSProperties } from 'react'
-import { IntersectionOptions } from '../src/typings/types'
 import { withKnobs, number, boolean } from '@storybook/addon-knobs'
 import Status from './Status'
 

tsconfig.test.json

@@ -4,8 +4,8 @@
     "module": "commonjs",
     "target": "es6",
     "declaration": true,
-    "emitDeclarationOnly": true,
-    "outDir": ".",
+    "emitDeclarationOnly": false,
+    "outDir": "dist",
     "noEmit": false
   },
   "files": ["src/test-utils.ts"]