Address Autofill | Mapbox Search JS

Public beta for Mapbox Search JS

Mapbox Search JS はパブリックベータ版です。パブリックベータ段階では、フレームワークが安定するにつれて変更される可能性があります。

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

このsection on AddressAutofillは役に立ちましたか？

Hooks

useAddressAutofillCore

A React hook that returns a AddressAutofillCore instance.

Parameters

options(AddressAutofillOptions)

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

このsection on useAddressAutofillCoreは役に立ちましたか？

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

confirmAddress

このsection on useConfirmAddressは役に立ちましたか？

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.

このsection on AddressAutofillPropsは役に立ちましたか？

追加の開発者リソース

このpageは役に立ちましたか？