@addresszen/react

Address Lookup React Component

The <AddressLookup /> component is a wrapper around the @addresszen/address-lookup library. It provides a simple way to integrate the address lookup functionality into your React application.

Installation

npm i @addresszen/react

Usage

Default

By default, AddressLookup will render an input field that will trigger the address lookup when focused.

import { AddressLookup } from "@addresszen/react";

<AddressLookup
  // AddressLookup accepts the same props as an input element
  className="my-input-class"
  // AddressLookup also accepts a config prop
  config={{
    // Add your API Key
    apiKey: "ak_test",
    // Handle the address once it has been retrieved from the API
    onAddressRetrieved: (address) => {
      setState({ address });
    },
  }}
/>;

Bring Your Own Component

AddressLookup accepts a single React Element component as a child. This allows you to use your own input component.

import { AddressLookup } from "@addresszen/react";

<AddressLookup
  config={{
    apiKey: "ak_test",
    onAddressRetrieved: (a) => setState(a),
  }}
>
  <input className="my-input-class" placeholder="Enter your address" />
</AddressLookup>;

Configuration

The top level props provided to <AddressLookup /> configures the underlying attributes for the <input> element.

Configuration specific to the address lookup functionality is passed as a config prop.

The configuration object maps identically to the configuration object used by @addresszen/address-lookup. Find out more in our documentation.

Licence

Copyright IDDQD Limited