fix: resolve all known issues ahead of 7.1.0 release

- Fix inverse sentinel placement: sentinel now renders before children
  when inverse=true so the IO top-margin fires correctly when scrolling up
- Add SSR guard: typeof IntersectionObserver === 'undefined' check in
  Effect 2b prevents crash in Next.js App Router server components
- Fix onScroll prop type: MouseEvent -> UIEvent (scroll events are UIEvents)
- Fix defaultThreshold.value: 0.8 -> 80 (was computing 99.2% rootMargin
  instead of 20% on invalid scrollThreshold input)
- Add exports field to package.json for Node ESM and Next.js 13+ App Router
  subpath resolution; main/module kept for older bundler fallback
- Bump version to 7.1.0
- Fix pre-existing ts-check breakage: replace global with globalThis in
  test files, add resolveJsonModule for JSON import, exclude stories from
  tsconfig (storybook types not installed in devDependencies)

Author: iamdarshshah

package.json

@@ -1,15 +1,22 @@
 {
   "name": "react-infinite-scroll-component",
-  "version": "7.0.1",
+  "version": "7.1.0",
   "description": "An Infinite Scroll component in react.",
   "engines": {
     "node": ">=20.0.0"
   },
   "source": "src/index.tsx",
   "main": "dist/index.js",
-  "unpkg": "dist/index.umd.js",
   "module": "dist/index.es.js",
+  "unpkg": "dist/index.umd.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "scripts": {
     "build": "rimraf dist && rollup -c",
     "prepublish": "yarn build",

src/__tests__/index.test.tsx

@@ -61,7 +61,7 @@ describe('React Infinite Scroll Component', () => {
 
   it('calls scroll handler if provided, when user scrolls', () => {
     jest.useFakeTimers();
-    const setTimeoutSpy = jest.spyOn(global, 'setTimeout');
+    const setTimeoutSpy = jest.spyOn(globalThis, 'setTimeout');
     const onScrollMock = jest.fn();
 
     const { container } = render(

src/__tests__/inverse.test.tsx

@@ -51,4 +51,49 @@ describe('inverse mode triggers next near top', () => {
     // inverse mode: margin applies to top, so rootMargin starts with a non-zero value
     expect(options.rootMargin).toBe('20% 0px 0px 0px');
   });
+
+  it('renders sentinel as first child in inverse mode', () => {
+    const { container } = render(
+      <InfiniteScroll
+        dataLength={5}
+        loader={'Loading...'}
+        hasMore={true}
+        next={() => {}}
+        height={100}
+        inverse
+      >
+        <div id="child" />
+      </InfiniteScroll>
+    );
+
+    const inner = container.querySelector(
+      '.infinite-scroll-component'
+    ) as HTMLElement;
+    // sentinel must be the first DOM child so the IO top-margin fires correctly
+    expect(inner.firstElementChild).toBe(
+      MockIntersectionObserver.instances[0].observedElements[0]
+    );
+  });
+
+  it('renders sentinel as last child in normal (non-inverse) mode', () => {
+    const { container } = render(
+      <InfiniteScroll
+        dataLength={5}
+        loader={'Loading...'}
+        hasMore={true}
+        next={() => {}}
+        height={100}
+      >
+        <div id="child" />
+      </InfiniteScroll>
+    );
+
+    const inner = container.querySelector(
+      '.infinite-scroll-component'
+    ) as HTMLElement;
+    // sentinel must be the last DOM child for the IO bottom-margin to work
+    expect(inner.lastElementChild).toBe(
+      MockIntersectionObserver.instances[0].observedElements[0]
+    );
+  });
 });

src/__tests__/package.test.ts

@@ -1,5 +1,3 @@
-export {};
-
 /**
  * Validates package.json fields that affect consumers at install time.
  * These checks run on every `yarn test` invocation — no extra infrastructure needed.
@@ -8,11 +6,7 @@ export {};
  * that block React 18/19 consumers at npm install, like #419.
  */
 
-// eslint-disable-next-line @typescript-eslint/no-require-imports
-const pkg = require('../../package.json') as {
-  peerDependencies: Record<string, string>;
-  devDependencies: Record<string, string>;
-};
+import pkg from '../../package.json';
 
 describe('package.json — peer dependency ranges', () => {
   it('react peer dep uses >= (open-ended), not ^ (caret-bounded)', () => {

src/__tests__/setup/intersectionObserverMock.ts

@@ -50,7 +50,7 @@ export class MockIntersectionObserver {
 }
 
 // Assign globally so `new IntersectionObserver(...)` in the component resolves to the mock.
-Object.defineProperty(global, 'IntersectionObserver', {
+Object.defineProperty(globalThis, 'IntersectionObserver', {
   writable: true,
   configurable: true,
   value: MockIntersectionObserver,

src/__tests__/threshold.test.ts

@@ -29,14 +29,14 @@ describe('parseThreshold', () => {
   it('warns and returns default for invalid string', () => {
     const t = parseThreshold('foo' as any);
     expect(t.unit).toBe(ThresholdUnits.Percent);
-    expect(t.value).toBe(0.8);
+    expect(t.value).toBe(80);
     expect(warnSpy).toHaveBeenCalled();
   });
 
   it('warns and returns default for non-string/number', () => {
     const t = parseThreshold(null as unknown as any);
     expect(t.unit).toBe(ThresholdUnits.Percent);
-    expect(t.value).toBe(0.8);
+    expect(t.value).toBe(80);
     expect(warnSpy).toHaveBeenCalled();
   });
 });

src/index.tsx

@@ -27,7 +27,7 @@ export interface Props {
   releaseToRefreshContent?: ReactNode;
   pullDownToRefreshThreshold?: number;
   refreshFunction?: Fn;
-  onScroll?: (e: MouseEvent) => any;
+  onScroll?: (e: UIEvent) => any;
   dataLength: number;
   initialScrollY?: number;
   className?: string;
@@ -145,6 +145,7 @@ export default function InfiniteScroll({
   // direction changes — typically never after initial mount.
   useEffect(() => {
     if (!hasMore) return;
+    if (typeof IntersectionObserver === 'undefined') return;
 
     const sentinel = sentinelRef.current;
     if (!sentinel) return;
@@ -181,7 +182,7 @@ export default function InfiniteScroll({
     if (!scrollEl) return;
 
     const handler = (e: Event) => {
-      setTimeout(() => onScroll(e as MouseEvent), 0);
+      setTimeout(() => onScroll(e as UIEvent), 0);
     };
 
     scrollEl.addEventListener('scroll', handler as EventListener);
@@ -329,6 +330,7 @@ export default function InfiniteScroll({
         ref={infScrollRef}
         style={containerStyle}
       >
+        {inverse && sentinel}
         {pullDownToRefresh && (
           <div style={{ position: 'relative' }} ref={pullDownRef}>
             <div
@@ -348,7 +350,7 @@ export default function InfiniteScroll({
         {children}
         {!showLoader && !hasChildrenResolved && hasMore && loader}
         {showLoader && hasMore && loader}
-        {sentinel}
+        {!inverse && sentinel}
         {!hasMore && endMessage}
       </div>
     </div>

src/utils/threshold.ts

@@ -5,7 +5,7 @@ export const ThresholdUnits = {
 
 const defaultThreshold = {
   unit: ThresholdUnits.Percent,
-  value: 0.8,
+  value: 80,
 };
 
 export function parseThreshold(scrollThreshold: string | number) {

tsconfig.json

@@ -48,6 +48,7 @@
     ] /* Type declaration files to be included in compilation. */,
     // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
     "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+    "resolveJsonModule": true /* Allow importing .json files (used in package.test.ts). */,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true
     // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
@@ -61,5 +62,5 @@
     // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
   },
   "include": ["src/**/*", "lint-staged.config.js", "jest.config.js"],
-  "exclude": ["node_modules", "dist"]
+  "exclude": ["node_modules", "dist", "src/stories"]
 }