react-autocomplete-form

v0.0.5

A collection of React components for building forms with Google Places autocomplete functionality.

Example

Installation

Using CLI (Recommended)

The easiest way to install react-autocomplete-form is through the CLI

npx react-autocomplete-form init

Setup

Environment Variables and API Keys

To use the components, you need to set up the environment variables and API keys. More information on how to get your Google Maps API key here.

Your .env file should look like this:

### MAPS ###
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_google_maps_api_key_here

Usage

Importing the components

To use the components, you need to import them into your project.

import { AutocompleteForm } from "@/components/autocomplete-form";
import { LocationInput } from "@/components/location-input";
import { CityInput } from "@/components/city-input";
import { ProvinceInput } from "@/components/province-state-input";
import { PostalCodeInput } from "@/components/postalcode-input";

Basic Example

import { AutocompleteForm } from "@/components/autocomplete-form";
import { LocationInput } from "@/components/location-input";
import { CityInput } from "@/components/city-input";
import { ProvinceInput } from "@/components/province-state-input";
import { PostalCodeInput } from "@/components/postalcode-input";

export default function Example() {
  return (
    <AutocompleteForm onSubmit={handleSubmit}>
      <LocationInput />
      <CityInput />
      <ProvinceInput />
      <PostalCodeInput />
    </AutocompleteForm>
  );
}

Customized Example

Here's an example of a customized form with labels and styling.

<div className="flex w-full items-center justify-center" >
  <AutocompleteForm
    className="flex flex-col gap-4 max-w-xl border border-gray-100 rounded-2xl py-6 px-8"
    onSubmit={handleSubmit}
  >
    <div className="flex flex-col gap-1">
      <label htmlFor="location" className="font-semibold text-sm">
        Enter address *
      </label>

      {/* Location Input */}
      <LocationInput name="location" id="location" />
    </div>

    <div className="flex max-md:flex-col max-md:gap-3 w-full gap-2">
      <div className="w-full flex flex-col gap-1">
        <label htmlFor="city" className="font-semibold text-sm">
          City *
        </label>

        {/* City Input */}
        <CityInput name="city" id="city" />
      </div>

      <div className="w-full flex flex-col gap-1">
        <label htmlFor="province" className="font-semibold text-sm">
          Province *
        </label>

        {/* Province/State Input */}
        <ProvinceInput name="province" id="province" />

        {/* <StateInput name="province" id="province" /> */}
      </div>

      <div className="w-full flex flex-col gap-1">
        <label htmlFor="postalCode" className="font-semibold text-sm">
          Postal Code *
        </label>

        {/* Postal Code Input */}
        <PostalCodeInput name="postalCode" id="postalCode" />
      </div>
    </div>

    <button
      type="submit"
      className="mt-4 px-6 py-2 bg-black text-white font-semibold cursor-pointer rounded-xl hover:bg-gray-800 transition-colors duration-200"
    >
      Submit
    </button>

    <div className="w-full flex justify-center">
      <p className="text-xs font-light text-gray-500">
        * Required fields
      </p>
    </div>
  </AutocompleteForm>
</div>