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 })}
/>

2. 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",
  });
}, []);

3. 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 }),
      /* ... */
    });
  }, []);