Hooks | Mapbox Search JS

lightning

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)

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

useSearchBoxCore

A React hook that returns a SearchBoxCore instance.

Parameters

options(SearchBoxOptions)

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

SearchBoxCore

useSearchSession

A React hook that returns a SearchSession instance.

Parameters

search((SearchBoxCore | AddressAutofillCore))

Returns

SearchSession:

SearchSession

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

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

confirmAddress