Skip to main content

Hooks

Join the Mapbox Developers Discord Communityarrow-right
Public beta for Mapbox Search JS

Mapbox Search JS is in public beta. During the public beta phase, frameworks may be subject to potential changes as they stabilize.

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: 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?

useSearchBoxCore

A React hook that returns a SearchBoxCore instance.

Parameters

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

Returns

SearchBoxCore

Example

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

useSearchSession

A React hook that returns a SearchSession instance.

Parameters

search((SearchBoxCore | AddressAutofillCore))

Returns

SearchSession:
Was this section on useSearchSession helpful?

useEvented

A React hook to register an event listener on a Search JS Core Evented object.

Evented is a base class that is inherited by SearchSession.

Parameters

evented((Evented<T> | null))
eventName(K)
cb(function (object: any): any)

Returns

void
Was this section on useEvented 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 '../src';

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?
Join the Mapbox Developers Discord Communityarrow-right
Was this page helpful?