Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | 2x 1x | import { useMemo, useRef } from 'react'; import { AddressConfirmOptions, AddressConfirmShowResult, confirmAddress } from '@mapbox/search-js-web'; interface UseConfirmAddressObject { formRef: React.RefObject<HTMLFormElement>; showConfirm: ( options?: Partial<AddressConfirmOptions> ) => Promise<AddressConfirmShowResult>; } /** * A React hook that returns a form ref and a function to show the address confirmation modal * * @param {AddressConfirmOptions} optionsArg * @see {@link confirmAddress} * @example * ```typescript * 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> * ); * } * ``` */ export function useConfirmAddress( optionsArg: AddressConfirmOptions = {} ): UseConfirmAddressObject { const formRef = useRef<HTMLFormElement>(null); return useMemo(() => { return { formRef, showConfirm: () => confirmAddress(formRef.current, optionsArg) }; }, [formRef, optionsArg]); } |