Add Address Autofill in a React app

Beginner

codeJavaScript

Prerequisite

Familiarity with React and front-end development concepts.

React is a popular JavaScript library used for building user interfaces. Since React manipulates the DOM, it can be confusing to connect React with other libraries that also manipulate the DOM and manage state — like Mapbox Search JS.

In this tutorial, you will learn how to add Mapbox Search JS React to your website, which builds on Mapbox Search JS to provide a first-class React experience.

Address Autofill helps developers simplify the tedious multi-field address form into a single autocomplete search box, allowing their customers to find their address with a few keystrokes.

Getting started

A Mapbox access token. A list of all your tokens can be located on the Access Token page in your Developer Console.
A text editor. Use the text editor of your choice for writing HTML, CSS, and JavaScript.
Node.js and npm. To run the commands necessary to run your React app locally, install Node.js and npm.
Working familiarity with React. You don't need to have a lot of experience using React to complete this tutorial, but you should be familiar with the underlying concepts and workflows.

Set up the page structure

To get started, create a new folder called add-address-autofill-with-react.

In the add-address-autofill-with-react folder, create a new file:

package.json: This file is used to specify all the Node packages that your app requires, including React and Mapbox Search JS.

Create blank files that will have the following file structure. You will fill in the contents of these files later in the tutorial.

folder add-address-autofill-with-react

code package.json

folder public

code index.html

folder src

code index.js

Copy the following code into package.json:

package.json


{
    "name": "add-address-autofill-with-react",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "react": "^17.0.2",
        "react-dom": "^17.0.2"
    },
    "devDependencies": {
        "react-scripts": "^4.0.3"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build"
    },
    "eslintConfig": {
        "extends": [
            "react-app"
        ]
    },
    "browserslist": [
        "defaults",
        "not ie 11"
    ],
    "author": "Mapbox",
    "license": "MIT"
}

Besides the packages react and react-dom, this file also requires react-scripts to build the app. This is also known as Create React App.

Save your changes.

In the command line, navigate into the add-address-autofill-with-react folder you created.

In that folder, run the command npm install, which will install all the Node packages that you specified in the package.json file. This step also creates the package-lock.json file.

Installing Search JS React

@mapbox/search-js-react is the main package, which is a React-specific interface to Mapbox Search JS.

To install Search JS React, run the one-time command:


npm install --save @mapbox/search-js-react

This step will change your package.json.

Create the HTML page

Open the public/index.html file and paste the following code into it:

public/index.html


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Add Address Autofill in a React app</title>
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
    </body>
</html>

This code creates the structure of the HTML page your users will see. There is a <div> element with the ID root in the <body> of the page. This <div> is the container in which the React app will be rendered on the page.

Save your changes.

Create the React app

Open the src/index.js file and paste the following code into it:

src/index.js



import ReactDOM from 'react-dom';

function App() {
    return (
        <form>
            <input name="address" placeholder="Address" type="text" />
            <input name="unit" placeholder="Unit number" type="text" />
            <input name="city" placeholder="City" type="text" />
            <input name="state" placeholder="State" type="text" />
            <input name="country" placeholder="Country" type="text" />
            <input name="postcode" placeholder="Postcode" type="text" />
        </form>
    );
}

ReactDOM.render(
<React.StrictMode>
        <App />
</React.StrictMode>,
    document.getElementById('root')
);

This code creates an <App /> React component, which renders a form with input elements for an address form. You are responsible for styling of input elements.

At the bottom, this code also renders our <App /> component to the #root container specified in index.html above.

Save your changes.

Set up autocomplete tags

Search JS React requires HTML autocomplete tags, a standard browser feature. Google Chrome, Mozilla Firefox, and Safari use autocomplete to autofill addresses and credit cards.

You may already have autocomplete tags. You can test this with the presence of autocomplete, or autoComplete, properties in React inputs.


return (
    <input
        name="address"
        placeholder="Address"
        type="text"
        autoComplete="street-address"
    />
);

The autoComplete property can also be specified on Formik <Field /> inputs, a popular React form handling library.

Add autocomplete tags

If autocomplete tags are not present, you'll have to add them to each HTML input you'd like to autofill.

Here are common autocomplete tags for addresses. This is a non-exhaustive list.

Autocomplete tag	Description	Example
`autocomplete="address-line1"`	The first line of an address, usually includes the street number and street.	740 15th St NW
`autocomplete="address-line2"`	The second line of an address, usually an apartment number.	Apartment 700
`autocomplete="address-level1"`	The least specific administrative level. In the United States, this is the state or territory.	District of Columbia
`autocomplete="address-level2"`	The second least specific administrative level. In the United States, this is the city.	Washington
`autocomplete="address-level3"`	In countries with more than two administrative levels.
`autocomplete="postal-code"`	The postal code of the administrative level.	20005
`autocomplete="country"`	The standardized country code.	us
`autocomplete="country-name"`	The country name. Note: These are non-standardized.	United States

Using autoComplete, see below how this changes src/index.js.

src/index.js


import React from 'react';
import ReactDOM from 'react-dom';
 
function App() {
    return (
        <form>
            <input
                name="address" placeholder="Address" type="text"
 
                autoComplete="address-line1"
            />
            <input
                name="apartment" placeholder="Apartment number" type="text"
 
                autoComplete="address-line2"
            />
            <input
                name="city" placeholder="City" type="text"
 
                autoComplete="address-level2"
            />
            <input
                name="state" placeholder="State" type="text"
 
                autoComplete="address-level1"
            />
            <input
                name="country" placeholder="Country" type="text"
 
                autoComplete="country"
            />
            <input
                name="postcode" placeholder="Postcode" type="text"
 
                autoComplete="postal-code"
            />
        </form>
    );
}

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);

Add Address Autofill

Our last step is to wrap the <input> element in <AddressAutofill>, available from the Search JS React package.

Note this works because:

Our <input> is the child of a <form> element.
Our <input>, and others, have the proper autoComplete values. The input itself has the value address-line1.

See below how this changes src/index.js. You will need to change the access token to the one from your account.

src/index.js


import React from 'react';
import ReactDOM from 'react-dom';
 
import { AddressAutofill } from '@mapbox/search-js-react';
 
function App() {
    return (
        <form>
 
            <AddressAutofill accessToken="YOUR_MAPBOX_ACCESS_TOKEN">
 
                <input
 
                    name="address" placeholder="Address" type="text"
 
                    autoComplete="address-line1"
 
                />
 
            </AddressAutofill>
            <input
                name="apartment" placeholder="Apartment number" type="text"
                autoComplete="address-line2"
            />
            <input
                name="city" placeholder="City" type="text"
                autoComplete="address-level2"
            />
            <input
                name="state" placeholder="State" type="text"
                autoComplete="address-level1"
            />
            <input
                name="country" placeholder="Country" type="text"
                autoComplete="country"
            />
            <input
                name="postcode" placeholder="Postcode" type="text"
                autoComplete="postal-code"
            />
        </form>
    );
}

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);

Final product

You have created a React app that has a form with inputs, browser autocomplete, and uses Search JS React for interactive Address Autofill.

The final src/index.js page will look like the following:

src/index.js


import React from 'react';
import ReactDOM from 'react-dom';
import { AddressAutofill } from '@mapbox/search-js-react';

function App() {
    return (
        <form>
            <AddressAutofill accessToken="YOUR_MAPBOX_ACCESS_TOKEN">
                <input
                    name="address" placeholder="Address" type="text"
                    autoComplete="address-line1"
                />
            </AddressAutofill>
            <input
                name="apartment" placeholder="Apartment number" type="text"
                autoComplete="address-line2"
            />
            <input
                name="city" placeholder="City" type="text"
                autoComplete="address-level2"
            />
            <input
                name="state" placeholder="State" type="text"
                autoComplete="address-level1"
            />
            <input
                name="country" placeholder="Country" type="text"
                autoComplete="country"
            />
            <input
                name="postcode" placeholder="Postcode" type="text"
                autoComplete="postal-code"
            />
        </form>
    );
}

ReactDOM.render(
<React.StrictMode>
        <App />
</React.StrictMode>,
    document.getElementById('root')
);

This tutorial should be applicable to your own React application and workflows. Create React App is not required to use Search JS React.

Next steps

Congratulations! You have integrated Mapbox Search JS React into your React app, simplifying the tedious multi-field address form into a single autocomplete search box.

What we covered

Setting up a React App
Install Search JS React
Creating your address form
Adding autocomplete tags
Adding the AddressAutofill wrapper component

Learn More

Now that you've setup Address Autofill in your React app you can explore other Mapbox Search JS examples like

Was this tutorial helpful?

Getting started​

Set up the page structure​

Installing Search JS React​

Create the HTML page​

Create the React app​

Set up autocomplete tags​

Add autocomplete tags​

Add Address Autofill​

Final product​

Next steps​

What we covered​

Learn More​

Getting started

Set up the page structure

Installing Search JS React

Create the HTML page

Create the React app

Set up autocomplete tags

Add autocomplete tags

Add Address Autofill

Final product

Next steps

What we covered

Learn More