react-address-lookup
v4.0.0
Published
An address lookup React component.
Downloads
365
Readme
React-Address-Lookup
A React component for looking up addresses.
Requires a Postcoder API Key. Sign up for a free one at https://postcoder.com
Out-of-the-box, react-address-lookup uses a demo API Key that only returns data for the UK postcode 'NR14 7PZ'.
Find out more at: https://postcoder.com/docs/address-lookup
Install
npm i react-address-lookup
Usage
The <Postcoder />
component takes a function that is passed the object containing the selected address.
Example
import React, { Component } from "react";
import Postcoder from "react-address-lookup";
export default class AddressLookup extends Component {
logAddress = (addr) => {
console.log(addr);
}
render() {
return (
<Postcoder
apiKey="PCW45-12345-12345-1234X"
addressSelectedCallback={logAddress}
/>
);
}
}
Styling
The component provides the following classes that can be targeted for styling:
address-lookup-wrapper
: Targets the<div>
that wraps the rest of the component.address-lookup-select
: Targets the<select>
element that displays address results.address-lookup-option
: Targets the<option>
elements within the select element.address-lookup-search-button
: Targets the<button>
used to fire off the search.address-lookup-label
: Targets the<label>
element linked to the input.address-lookup-input
: Targets the<input>
used to enter a search term.
Fully International
To view a full list of all the countries (and their two character ISO codes) supported by the country
prop, check here: https://postcoder.com/docs/address-lookup#global-coverage
Development
- Run
npm ci
to install node_modules from package-lock.json - Run
npm start
to begin storybook for development