Skip to content

React Address Autocomplete Component Props

Jump to bottom
David Xu edited this page Aug 4, 2022 · 3 revisions

Prop Types

AddressObject A subset of the request object required by Lob. Note: Either zip_code is required or both city and state are required. Learn more about Lob's verification endpoint here

{
  primary_line: string,
  secondary_line: string?,
  city: string,
  state: string,
  zip_code: string
}

SelectionObject

{
  label: string,
  value: AddressObject
}

Autocomplete Props

Autocomplete renders a react-select input field which will display a list of address suggestions based on the users input.

  • addressComponentValues AddressObject
    • Specifies the search for autocomplete suggestions by including a city, state, and/or zip_code.
  • apiKey string
    • Required. Public API key to your Lob account.
  • delaySearch boolean
    • Delay calls to the API instead of calling on every keystroke. (Default: true)
  • delayValue number
    • The time in milliseconds to wait between each API call. (Default: 800)
  • inputValue string
    • Allows you to control the value of the input element
  • onSelection (option: SelectionObject) => void
    • Callback function when the select component changes. The equivalent to react-select's onChange prop
  • onInputChange ({ newValue: string, actionMeta: Object }) => void
    • Callback function when the input value changes. See react-select for more details
  • onError (errorMessage: string) => void
    • Callback function when we receive an API error.
  • primaryLineOnly boolean
    • When true, applying a suggestion updates the value of our select component with only the primary line of the address instead of the complete address.
  • disableLobLogo boolean
    • When true, the initial Lob logo will not be shown when there are no search results. The Lob logo will still be shown on search results for attribution reasons. We are working on shrinking the logo size to make the end UI/UX more palatable.

AddressForm Props

Renders a group of input fields for each address component (primary, secondary, city, state, zip) where the primary line input is an Autocomplete component. When the user selects an autocomplete suggestion the resulting address is inserted into its corresponding address component input field.

  • apiKey string
    • Public API key to your Lob account.
  • onFieldChange (e: Event) => void
    • Callback function when any input value changes. Use e.target.id to determine which component is being updated.
  • onSelection (option: SelectionObject) => void
    • Callback function when the select component changes
  • styles Object
    • Override the default styles by providing an object similar to the styling framework used by react-select. Each key corresponds to a component and maps to a function that returns the new styles.Here is an example:
const customStyles = {
  container: (baseStyles) => ({
    ...baseStyles,
    // custom styles go here
  })
}
  • Our style keys are prefixed with 'lob' to avoid colliding with the keys used by react-select.
    • lob_container
    • lob_input
    • lob_label
    • lob_row
  • For more details visit https://react-select.com/styles

AddressFormInternational Props

Renders a group of inputs for each address component including a select input for country code. Does not perform any address autocompletion.

  • onFieldChange (e: Event) => void
    • Callback function when any input value changes. Use e.target.id to determine which component is being updated.
  • styles Object
    • The same as the styles prop for AddressForm☝🏼

CountrySelect Props

A simple select component whose options are all of Lob's valid country codes for international verification. This component does have any unique props. Any props given to CountrySelect will get propagated to the underlying <select> input.

verify Function

Checks the deliverability of a given address and provides meta data such as geo coordinates, county, building type, etc.

  • Arguments
    • apiKey string
      • Public API key to your Lob account.
    • address string | AddressObject
      • The address to verify
  • Returns

verifyInternational Function

Checks the deliverability of a given address and provides meta data such as geo coordinates, county, building type, etc.

Clone this wiki locally