Add Address Autofill in a React app
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. Your Mapbox access tokens are on your Account page.
- 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.
add-address-autofill-with-react
package.json
public
index.html
src
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 (see Set up autocomplete tags), 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.
Address Autofill 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 on your website with using the JavaScript Console. After opening the Console, run the following command:
document.querySelector('[autocomplete~="street-address"], [autocomplete~="address-line1"]') != null
The output will read true if autocomplete tags are present.
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
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 properautoCompletevalues. The input itself has the valueaddress-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
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="my-access-token-here">
<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
Now that you have integrated the Mapbox Search JS React into your site, you can explore other, more complex examples in Examples.