Auto-Form-Fill

Overview

Auto-Form-Fill is a powerful tool designed to automatically fill forms on web pages. It simplifies and speeds up the process of form completion by automatically populating form fields with predefined data. The tool is highly configurable and can adapt to various forms and scenarios, ensuring seamless integration and operation.

Features

• Automatic Form Filling: Detects form fields on the current web page and fills them with predefined data.
• Highly Configurable: Allows users to set and modify form field data according to their needs.
• Adaptive: Can handle different types of forms and input fields.
• User-Friendly: Simple interface for configuration and management.

Installation

To install Auto-Form-Fill, follow these steps:

1. Install:

      npm i auto-form-fill

Usage

To use Auto-Form-Fill, you need to configure it according to your form's structure. Here is a step-by-step guide:

1. Wrap Your Page with <AutoFillWrapper>:

   • Ensure your HTML page is wrapped with <AutoFillWrapper> to enable the auto-fill functionality.

   import { AutoFillWrapper } from "auto-form-filler"
   
   <AutoFillWrapper>
     <!-- Your existing HTML content -->
   </AutoFillWrapper>

Usage in Development

Update Scripts

If you've made changes to auto-form-filler during development and want to see those changes reflected in your Next.js project, you can update your scripts as follows:

1. Restart Development Server: Run the following script to restart the development server when changes are detected in auto-form-filler. This script will reinstall dependencies and restart the development server.

   "restart-dev": "echo 'Changes detected in auto-form-filler' && pnpm install && pnpm run dev"

2. Watch for Changes: Use the watch script to automatically restart the development server whenever changes are detected in auto-form-filler.

   "watch": "npx nodemon --watch node_modules/auto-form-filler/dist --ext js,jsx,ts,tsx --exec \"pnpm run restart-dev\""

Change Package to File

To reference the local auto-form-filler package during development, update the auto-form-filler entry in your package.json file to point to the local file path. For example:

"auto-form-filler": "file:/Users/bibek.magar/Documents/Work/auto-form-npm"

Updates to next.config.js

Make sure to update your next.config.js file with the following changes:

const path = require('path');
...

const nextConfig = {
  ...
  webpack: (config, { dev, isServer }) => {
    if (dev && !isServer) {
      const autoFormFillerPath = path.resolve(__dirname, 'node_modules/auto-form-filler/dist');
      config.watchOptions = {
        ignored: /node_modules\/(?:[\\]+|\/)+(?!auto-form-filler)/,
      };

      config.module.rules.push({
        test: /\.(?:js|jsx|ts|tsx)$/,
        include: [autoFormFillerPath],
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['next/babel'],
            },
          },
        ],
      });
    }

    return config;
  },
};

module.exports = withSentryConfig(nextConfig, ...);

Adding New Fields

To add new fields to the configuration:

1. Identify the form field's name or ID on the web page.
2. Add the field and its corresponding data to the config.json file.

Changing Data Dynamically

Auto-Form-Fill supports dynamic data changes through an API. For more advanced configurations, refer to the API documentation provided in the repository.

License

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

Thank you for using Auto-Form-Fill! We hope it makes your form-filling tasks easier and more efficient.