Nimble Porridge Muncher

    @lob/react-address-autocomplete

    2.1.0 • Public • Published

    Lob React Address Autocomplete

    NPM Coverage license

    Version 2 is here! Our latest version of address autocomplete uses the latest changes from React 18. If you're using earlier version of react, please install version 1 package: @lob/react-address-autocomplete@previous

    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 or form. Check out the Autocomplete API for more configuration options on Postman or Lob Documentation.

    As always if this front end component doesn't suit your bootstrapped needs, feel free to check out the aformentioned links above to have more control over the look and feel of your address autocomplete and verification needs :)

    Install

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

    Demo

    LOB Autocomplete Demo

    Address Autocomplete Search Bar Demo Code

    import React, { useState } from 'react'
    
    import { Autocomplete } from '@lob/react-address-autocomplete'
    
    const App = () => {
      const [selectedResult, setSelectedResult] = useState({})
      const handleSelect = (selected) => {
        setSelectedResult(selected)
      }
    
      return (
        <Autocomplete
          apiKey="YOUR_API_KEY_HERE"
          onSelection={handleSelect}
          delaySearch={true}
        />
      )
    }

    Address Autocomplete Form Demo Code

    import React, { useState } from 'react';
    import { AddressForm } from '@lob/react-address-autocomplete'
    
    const AddressFormDemo = ({ apiKey }) => {
      const [selectedResult, setSelectedResult] = useState({})
    
    
      const handleSelect = (selected) => {
        setSelectedResult(selected)
      }
    
      const handleSubmit = () =>
        // Set this to handle an actual button click
        console.log(selectedResult)
    
      return (
        <div className="demoContainer">
          <h2>Address Form</h2>
          <AddressForm
            apiKey={apiKey}
            onSelection={handleSelect}
          />
          <button
            onClick={handleSubmit}
            style={{ width: '100%' }}
          >
            Submit
          </button>
        </div>
      );
    };
    
    export default AddressFormDemo;

    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

    Quick Usage

    apiKey

    Just plug in the API key you grabbed earlier to the apiKey prop.

    Handling the Selection process

    The onSelect prop is callback function that fires whenever an autocomplete suggestion has been selected. It passes in a location object 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"
    }

    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. Additionally you can set debounceValue to control how long to wait between calls in milliseconds.

    Click here for more details about the props for each component

    Release Logs

    View release notes from previous versions

    License

    MIT © lob

    Install

    npm i @lob/react-address-autocomplete

    DownloadsWeekly Downloads

    208

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    1.38 MB

    Total Files

    51

    Last publish

    Collaborators

    • lob