detect-autofill-react

A lightweight React hook for detecting autofill events on form inputs in modern browsers. This package provides an easy-to-use API to track autofill status on HTML elements, handle autofill events, and create responsive UI feedback.

Features

- Detects browser autofill using animations, transitions, and input events.
- Provides autofill and autofill cancel events.
- Lightweight and dependency-free.
- Compatible with modern browsers.

Installation

Install the package using npm, yarn, pnpm, or bun:

``bash npm install detect-autofill-react

`or`


yarn add detect-autofill-react
or

pnpm add detect-autofill-react
or

bun add detect-autofill-react


Usage
Import the hook and use it in your React component:

`tsx import React, { useRef } from "react"; import { useAutofillDetection } from "detect-autofill-react";

const AutofillExample = () => { const { isAutofilled } = useAutofillDetection(document);

return (


      
        Username
                  id="username"
          name="username"
          type="text"
          className="autofill-detect"
        />
      

      
        Password
                  id="password"
          name="password"
          type="password"
          className="autofill-detect"
        />
      

      Autofill Status: {isAutofilled ? "Autofilled" : "Not Autofilled"}

    
  );
};

export default AutofillExample;`

`$3`

#### Hook: useAutofillDetection

##### Parameters:

- scope: AutofillScope | null - The scope of the detection (can be a specific HTMLElement or document).

##### Returns:

- isAutofilled: boolean- Indicates whether the form field is autofilled. -autofillRef: React.RefObject` - Ref object for tracking autofill status.

$3

This package is licensed under the MIT License. See the LICENSE file for details.

$3

Contributions are welcome! Please submit issues and pull requests via GitHub.