Address Autofill

Search JS API Reference

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.

• The HTML autocomplete attribute
• Autofill

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

Parameters

Name	Description
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

Name	Description
options AddressAutofillOptions
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: '...' };

Related

• AddressAutofillCore
• AddressAutofillCore

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

Name	Description
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>
  );
}

Related

• confirmAddress

Was this section on useConfirmAddress helpful?

Options and Type Definitions

AddressAutofillProps

Props for the AddressAutofill component

Type

Object

Properties

Name	Description
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

Methods available on a ref when attached to the AddressAutofill component.

Type

Object

Properties

Name	Description
focus any

Was this section on AddressAutofillRefType helpful?

Was this page helpful?