react-intersection-observer - npm Package Compare versions

Comparing version 9.4.4 to 9.5.0-beta.1

index.d.ts

 import * as React from 'react';
-export { InView } from './InView';
-export { useInView } from './useInView';
-export { observe, defaultFallbackInView } from './observe';
+
+type State = {
+    inView: boolean;
+    entry?: IntersectionObserverEntry;
+};
+/**
+ ## Render props
+
+ To use the `<InView>` component, you pass it a function. It will be called
+ whenever the state changes, with the new value of `inView`. In addition to the
+ `inView` prop, children also receive a `ref` that should be set on the
+ containing DOM element. This is the element that the IntersectionObserver will
+ monitor.
+
+ If you need it, you can also access the
+ [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry)
+ on `entry`, giving you access to all the details about the current intersection
+ state.
+
+ ```jsx
+ import { InView } from 'react-intersection-observer';
+
+ const Component = () => (
+ <InView>
+ {({ inView, ref, entry }) => (
+      <div ref={ref}>
+        <h2>{`Header inside viewport ${inView}.`}</h2>
+      </div>
+    )}
+ </InView>
+ );
+
+ export default Component;
+ ```
+
+ ## Plain children
+
+ You can pass any element to the `<InView />`, and it will handle creating the
+ wrapping DOM element. Add a handler to the `onChange` method, and control the
+ state in your own component. Any extra props you add to `<InView>` will be
+ passed to the HTML element, allowing you set the `className`, `style`, etc.
+
+ ```jsx
+ import { InView } from 'react-intersection-observer';
+
+ const Component = () => (
+ <InView as="div" onChange={(inView, entry) => console.log('Inview:', inView)}>
+ <h2>Plain children are always rendered. Use onChange to monitor state.</h2>
+ </InView>
+ );
+
+ export default Component;
+ ```
+ */
+declare class InView extends React.Component<IntersectionObserverProps | PlainChildrenProps, State> {
+    constructor(props: IntersectionObserverProps | PlainChildrenProps);
+    componentDidUpdate(prevProps: IntersectionObserverProps): void;
+    componentWillUnmount(): void;
+    node: Element | null;
+    _unobserveCb: (() => void) | null;
+    observeNode(): void;
+    unobserve(): void;
+    handleNode: (node?: Element | null) => void;
+    handleChange: (inView: boolean, entry: IntersectionObserverEntry) => void;
+    render(): React.ReactNode;
+}
+
+/**
+ * React Hooks make it easy to monitor the `inView` state of your components. Call
+ * the `useInView` hook with the (optional) [options](#options) you need. It will
+ * return an array containing a `ref`, the `inView` status and the current
+ * [`entry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry).
+ * Assign the `ref` to the DOM element you want to monitor, and the hook will
+ * report the status.
+ *
+ * @example
+ * ```jsx
+ * import React from 'react';
+ * import { useInView } from 'react-intersection-observer';
+ *
+ * const Component = () => {
+ *   const { ref, inView, entry } = useInView({
+ *       threshold: 0,
+ *   });
+ *
+ *   return (
+ *     <div ref={ref}>
+ *       <h2>{`Header inside viewport ${inView}.`}</h2>
+ *     </div>
+ *   );
+ * };
+ * ```
+ */
+declare function useInView({ threshold, delay, trackVisibility, rootMargin, root, triggerOnce, skip, initialInView, fallbackInView, onChange, }?: IntersectionOptions): InViewHookResponse;
+
+/**
+ * What should be the default behavior if the IntersectionObserver is unsupported?
+ * Ideally the polyfill has been loaded, you can have the following happen:
+ * - `undefined`: Throw an error
+ * - `true` or `false`: Set the `inView` value to this regardless of intersection state
+ * **/
+declare function defaultFallbackInView(inView: boolean | undefined): void;
+/**
+ * @param element - DOM Element to observe
+ * @param callback - Callback function to trigger when intersection status changes
+ * @param options - Intersection Observer options
+ * @param fallbackInView - Fallback inView value.
+ * @return Function - Cleanup function that should be triggered to unregister the observer
+ */
+declare function observe(element: Element, callback: ObserverInstanceCallback, options?: IntersectionObserverInit, fallbackInView?: boolean | undefined): () => void;
+
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
-export type ObserverInstanceCallback = (inView: boolean, entry: IntersectionObserverEntry) => void;
+type ObserverInstanceCallback = (inView: boolean, entry: IntersectionObserverEntry) => void;
 interface RenderProps {
@@ -12,3 +120,3 @@ inView: boolean;
 }
-export interface IntersectionOptions extends IntersectionObserverInit {
+interface IntersectionOptions extends IntersectionObserverInit {
     /** The IntersectionObserver interface's read-only `root` property identifies the Element or Document whose bounds are treated as the bounding box of the viewport for the element which is the observer's target. If the `root` is null, then the bounds of the actual document viewport are used.*/
@@ -35,3 +143,3 @@ root?: Element | null;
 }
-export interface IntersectionObserverProps extends IntersectionOptions {
+interface IntersectionObserverProps extends IntersectionOptions {
     /**
@@ -47,3 +155,3 @@ * Children expects a function that receives an object
  * */
-export type PlainChildrenProps = IntersectionOptions & {
+type PlainChildrenProps = IntersectionOptions & {
     children?: React.ReactNode;
@@ -64,3 +172,3 @@ /**
  */
-export type InViewHookResponse = [
+type InViewHookResponse = [
     (node?: Element | null) => void,
@@ -74,1 +182,3 @@ boolean,
 };
+
+export { InView, InViewHookResponse, IntersectionObserverProps, IntersectionOptions, ObserverInstanceCallback, PlainChildrenProps, defaultFallbackInView, observe, useInView };

package.json

 {
   "name": "react-intersection-observer",
-  "version": "9.4.4",
+  "version": "9.5.0-beta.1",
   "description": "Monitor if a component is inside the viewport, using IntersectionObserver API",
   "source": "./src/index.tsx",
-  "main": "./react-intersection-observer.js",
-  "module": "./react-intersection-observer.esm.js",
-  "unpkg": "./react-intersection-observer.umd.js",
+  "main": "./index.js",
+  "module": "./index.mjs",
   "types": "./index.d.ts",
@@ -17,4 +16,4 @@ "exports": {
       "types": "./index.d.ts",
-      "require": "./react-intersection-observer.js",
-      "default": "./react-intersection-observer.modern.mjs"
+      "require": "./index.js",
+      "default": "./index.mjs"
     }
@@ -63,3 +62,3 @@ },
     {
-      "path": "dist/react-intersection-observer.esm.js",
+      "path": "dist/index.mjs",
       "name": "InView",
@@ -70,3 +69,3 @@ "import": "{ InView }",
     {
-      "path": "dist/react-intersection-observer.esm.js",
+      "path": "dist/index.mjs",
       "name": "useInView",
@@ -77,3 +76,3 @@ "import": "{ useInView }",
     {
-      "path": "dist/react-intersection-observer.esm.js",
+      "path": "dist/index.mjs",
       "name": "observe",
@@ -80,0 +79,0 @@ "import": "{ observe }",

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

Worsened metrics

Total package byte prevSize

104613

decreased by-51.25%

Number of package files

10

decreased by-41.18%

Lines of code

988

decreased by-52.97%

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes