Skip to main content

Address Autofill

Additional Developer Resources

Address Autofill provides a rich UI for address search and autocomplete functionality for address forms in React-based web apps.

This page includes reference documentation for the Address Autofill and Address Confirmation components, hooks, and types in the Mapbox Search JS React framework.

For installation instructions and a helpful introduction to using Address Autofill in your React app, see our React Address Autofill Quickstart Guide.

Components

AddressAutofill

<AddressAutofill> is a React component that wraps an address <input> element with intelligent, location-aware autocomplete functionality.

To use this element, you must have a Mapbox access token.

This component must be a descendant of a <form>, and the form must have inputs with proper HTML autocomplete attributes. If your application works with browser autofill, you may already have this functionality.

Internally, this wraps the <mapbox-address-autofill> element.

Parameters

props(AddressAutofillProps) 

Example

import { AddressAutofill } from '@mapbox/search-js-react'
export function Component() {
  const [value, setValue] = React.useState('');

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <form>
      <AddressAutofill accessToken={'YOUR_MAPBOX_ACCESS_TOKEN'}>
        <input
          autoComplete="shipping address-line1"
          value={value}
          onChange={handleChange}
        />
      </AddressAutofill>
    </form>
  );
}
Was this section on AddressAutofill helpful?

Hooks

useAddressAutofillCore

A React hook that returns a AddressAutofillCore instance.

Parameters

options(AddressAutofillOptions) 
NameDescription
options.accessToken
string		Your Mapbox access token.

Returns

AddressAutofillCore

Example

import { useAddressAutofillCore } from '../src';
const autofill = useAddressAutofillCore({ accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN' });
const response = await autofill.suggest('1600 pennsylvania ave nw', {
  sessionToken: 'test-123'
});
console.log(response);
// { suggestions: [...], attribution: '...' };
Was this section on useAddressAutofillCore helpful?

useConfirmAddress

A React hook that returns a form ref and a function to show the address confirmation modal

Parameters

optionsArg(AddressConfirmOptions)(default {}) 

Returns

UseConfirmAddressObject

Example

import { useConfirmAddress } from '@mapbox/search-js-react';

export function Autofill(): React.ReactElement {
  const { formRef, showConfirm } = useConfirmAddress({
    footer: 'My custom footer'
  });

  const handleSubmit = React.useCallback(async () => {
    const result = await showConfirm();
     console.log(result);
  }, [showConfirm]);

  return (
    <div>
      <form
        ref={formRef}
        style={{ display: 'flex', flexDirection: 'column', marginTop: 30 }}
      >
        <AddressAutofill
          ...
        >
    </div>
  );
}
Was this section on useConfirmAddress helpful?

Options and Type Definitions

AddressAutofillProps

Type

Object

Properties

accessToken(string): The Mapbox access token to use for all requests.
    browserAutofillEnabled(boolean): Enables the browser's autocomplete popup to show during the first two typed characters while Mapbox results are suppressed. Defaults to false.

    Note: Due to varying specifications, efforts to suppress browser autocomplete behavior may not work on all browsers.

      children(React.ReactChild): Children to render inside the autofill component. This must include an <input> element with either autocomplete type "street-address" or "address-line1" .
        confirmOnBrowserAutofill((boolean | AddressConfirmOptions)): If true, forms autofilled by the browser will prompt the confirmAddress dialog for user confirmation. An AddressConfirmOptions object can also be passed to prompt confirmAddress with custom options. Defaults to false.
          interceptSearch(function (value: string): string): A callback providing the opportunity to validate and/or manipulate the input text before it triggers a search, for example by using a regular expression. If a truthy string value is returned, it will be passed into the underlying search API. If null , undefined or empty string is returned, no search request will be performed.
            onChange(function (value: string): void): Callback for when the <input> value changes.
              onRetrieve(function (res: AddressAutofillRetrieveResponse): void): Fired when the user has selected a suggestion, before the form is autofilled. The underlying response from AddressAutofillCore is passed.
                onSuggest(function (res: AddressAutofillSuggestionResponse): void): Fired when the user is typing in the input and provides a list of suggestions. The underlying response from AddressAutofillCore is passed.
                  onSuggestError(function (error: Error): void): Fired when AddressAutofillCore has errored providing a list of suggestions. The underlying error is passed.
                    options(Partial<AddressAutofillOptions>): Options to pass to the underlying AddressAutofillCore interface.
                      popoverOptions(Partial<PopoverOptions>): The PopoverOptions to define popover positioning.
                        theme(Theme): The Theme to use for styling the autofill and confirmation dialog components.
                          Was this section on AddressAutofillProps helpful?

                          AddressAutofillRefType

                          Type

                          Object

                          Properties

                          focus(any)
                            Was this section on AddressAutofillRefType helpful?
                            Additional Developer Resources
                            Was this page helpful?