Swiftcomplete React

Address and what3words search in a React wrapper around the <swiftcomplete-search> web component. Type to get suggestions, select to fill your form or handle the result via hooks.

Features

• Address search - Postcodes, street names, full addresses.
• what3words search - Enable via API to search by three-word addresses.
• Device location - Optional biasing of results by user’s location.
• Styling - Same as the web component: variant, size, theme props and CSS variables. Automatically follows prefers-color-scheme by default.
• Events via hooks - useSelectedAddress, useSearchStarted, useSearchEnded, useEvents, and more.
• Ref API - getElement(), getInput(), and imperative methods like populateFields().

Quick start

import { Swiftcomplete } from '@swiftcomplete/react';
import { useRef } from 'react';

function App() {
  const ref = useRef(null);

  return (
    <Swiftcomplete
      ref={ref}
      apiKey="YOUR_API_KEY"
      placeholder="Search address or postcode"
    />
  );
}

Configure the API (API key, country, search options, device location) via useApi(config). See Getting started.

Get an API key from Swiftcomplete.

Documentation

| Topic | Description | | ---------------------------------------------- | --------------------------------------------------------------------------------- | | Getting started | Installation, API key, basic usage with ref and useApi | | Props | apiKey, placeholder, country, variant, size, theme, overrides | | Styling | Variant, size, theme, CSS variables, custom icons | | Events (hooks) | useSelectedAddress, useSearchStarted, useSearchEnded, useEvents, and more | | what3words search | Enabling what3words via the service | | Device location | Biasing results by the user’s location | | Populate fields | Filling form fields from the selected address via ref | | Advanced | useApi config, ref, overriding UI |

Browser support

Same as the underlying web component: modern browsers with custom elements and Shadow DOM. React 18+.