Address Entry

The AddressEntry component provides a complete address input experience with real-time address suggestions, manual entry fallback, and validation.

Basic usage

import {
  OpendoorProvider,
  AddressEntry,
} from '@opendoor/partner-sdk-client-react';
import { OpendoorClient } from '@opendoor/partner-sdk-client-js-core';

const client = new OpendoorClient({ baseURL: '/api/opendoor/v1' });

function App() {
  return (
    <OpendoorProvider client={client}>
      <AddressEntry
        onAddressSelect={(address) => {
          console.log(address.street1, address.city, address.state);
        }}
      />
    </OpendoorProvider>
  );
}

Props

Prop	Type	Default	Description
onAddressSelect	(address: Address) => void	Required	Called when user selects an address
appearance	OpendoorAppearance	Default theme	Visual customization
enableAddressSuggestions	boolean	true	Enable address suggestions
debounceMs	number	300	Debounce delay for address suggestions
disabled	boolean	false	Disable all interaction
placeholderText	string	"Enter your home address"	Input placeholder
buttonText	string	"Get cash offer"	Submit button text
showButton	boolean	true	Show integrated submit button
buttonIcon	ReactNode	Arrow icon	Custom button icon
inputIcon	ReactNode	None	Icon inside the input
manualEntryText	string	"Enter address manually instead"	Manual entry link text

Lifecycle callbacks

Callback	Type	When it fires
onReady	() => void	Component mounted
onChange	(address: Partial<Address>) => void	Any field changes
onAddressSuggestionsStart	(query: string) => void	Address suggestions API call starts
onAddressSuggestionsComplete	(suggestions: Address[]) => void	Address suggestions results received
onValidationError	(error: string) => void	Manual submit validation fails
onError	(error: Error) => void	Any error occurs

How address suggestions work

1. User types at least 3 characters
2. After the debounce delay, the component calls client.getAddressSuggestions(query)
3. This request goes to your backend → server SDK → Opendoor’s address service
4. Suggestions appear in a dropdown
5. User clicks a suggestion → onAddressSelect fires with the full Address

If no suggestions match, the component shows a “Enter address manually” link that reveals a form with street, city, state, and ZIP fields.

The component does NOT create offers

AddressEntry only handles address selection. Creating an offer is the parent’s responsibility:

const handleAddressSelect = async (address: Address) => {
  // You decide what happens next
  const offer = await client.createOffer({ address });
  navigate(`/offer/${offer.opendoorOfferRequestId}`);
};

This keeps the component focused and reusable — you might want to do something other than immediately creating an offer (validate eligibility, show a confirmation, store the address, etc.).