All files / src/hooks useConfirmAddress.tsx

42.85% Statements 3/7
0% Branches 0/1
0% Functions 0/4
33.33% Lines 2/6

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 602x           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]);
}