Skip to main content

Add to your React Application

This example deploys Address Lookup with React (via Webpack + Babel)

Use in your app

Install

npm install --save @addresszen/address-lookup

Usage

See src/index.js for a working example. Given a pre-existing React form, you may take the following steps to integrate Address Lookup.

  1. Create an id to reference your input.
const inputId = "line_1";

<input
type="text"
id={inputId}
value={address.line_1}
className="form-control"
onChange={(e) => setAddress({ ...address, line_1: e.target.value })}
/>
  1. Instantiate Address Lookup once when your input component has mounted with componentDidMount or useEffect(() => {}, []), referencing your component by its id.
React.useEffect(() => {
AddressLookup.setup({
inputField: document.getElementById(inputId),
apiKey: "zenkey",
});
}, []);
  1. Use the onAddressRetrieved callback to update your app when the user has selected an address, whether this is invoking a hook, setState() or some other action.
  const [address, setAddress] = useState({
line_1: "",
line_2: "",
city: "",
state: "",
zip_plus_4_code: "",
});

React.useEffect(() => {
AddressLookup.setup({
/* ... */
onAddressRetrieved: ({ line_1, line_2, city, state, zip_plus_4_code }) =>
setAddress({ line_1, line_2, city, state, zip_plus_4_code }),
/* ... */
});
}, []);