React-lob-address-autocomplete NPM

react-lob-address-autocomplete

Address Autocomplete React Component

Features

This is a very lightweight component that uses the Lob Autocomplete API in order to simplify the process of adding in a search autocomplete bar. Check out the Autocomplete API on Postman or Lob Documentation

Demo

LOB Autocomplete Demo

Demo Code

import React, { Component } from 'react'

import Autocomplete from 'react-lob-address-autocomplete'

const App = () => {
  const [selectedResult, setSelectedResult] = useState({})
  const handleSelect = (selected) => {
    setSelectedResult(selected)
    console.log(selected)
  }

  return (
    <Autocomplete APIKEY={{YOURAPIKEYHERE}} onSelect={handleSelect} delaySearch={true} />
  )
}

Install

npm install --save react-lob-address-autocomplete

Getting API Keys

Head to Lob.com and create your account. Head to the dashboard and click on Address Verification Getting Started to find your API keys. It's reccomended to use your publishable Live key for front end components. Lob Autocomplete has free unlimited requests so you don't have to worry about any credit card charges :)

Address Verification dashboard

API Keys

Usage

APIKEY

Just plug in the API key you grabbed earlier and add it in as an APIKEY prop.

Handling the Selection process

After adding in your API key the only only prop you need is a function to handle the selection process using and onSelect prop.

Debounced Search requests

Since Lob charges per request, you can set delaySearch to true which delays an API call until a user finishes typing in order to reduce API load if you want.

Location object

When a user selects an option, a location object will be returned with the following schema:

{
   "value": {
      "primary_line": "185 BAYSIDE VILLAGE PL",
      "city": "SAN FRANCISCO",
      "state": "CA",
      "zip_code": "94107"
   },
   "label": "185 BAYSIDE VILLAGE PL SAN FRANCISCO CA 94107"
}