Next-on-user-interaction NPM

next-on-user-interaction

next-on-user-interaction is a lightweight library for Next.js that provides a custom React hook to detect when a user interacts with the page. The hook is designed to help developers to lazily load third party javascript like analytics, advertisement, etc.

Features:

Detects user interactions such as scroll, and mouse movements.
Simple API for easy integration into your Next.js project.
Lightweight and efficient, with minimal impact on performance.
Improve core-web-vitals

Installation

npm install next-on-user-interaction
# or
yarn add next-on-user-interaction

Usage

//rootLayout.tsx
<html lang="en">
    <UserInteractionContextProvider>
    <body>
        {children}
    </body>
    <UserInteraction />
    </UserInteractionContextProvider>
</html>

//slowComponentWrapper.tsx
'use client';
import { useUserInteractionContext } from 'next-on-user-interaction';
import SlowComponent from './SlowComponent';

const SlowComponentWrapper = () => {
  const { userInteracted } = useUserInteractionContext();

  return <>{userInteracted ? <SlowComponent /> : <></>}</>;
};

export default SlowComponentWrapper;

nextjs user-interaction core-web-vitals

0.0.1

6 months ago

1.0.0

6 months ago