Skip to main content

Add to your React Application

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

Use in your app#


npm install --save @ideal-postcodes/address-finder


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

  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: })}/>
  1. Instantiate AddressFinder once when your input component has mounted with componentDidMount or useEffect(() => {}, []), referencing your component by its id.
React.useEffect(() => {  AddressFinder.setup({    inputField: document.getElementById(inputId),    apiKey: "iddqd",    injectStyle: true,  });}, []);
  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: "",    line_3: "",    post_town: "",    postcode: "",  });
  React.useEffect(() => {    AddressFinder.setup({      /* ... */      onAddressRetrieved: ({ line_1, line_2, line_3, post_town, postcode }) =>        setAddress({ line_1, line_2, line_3, post_town, postcode }),      /* ... */    });  }, []);

Run this demo#

npm install && npm start

Open http://localhost:8081/