@loqate/react

⚠️ IN ALPHA - NOT CURRENTLY FOR RELEASE

React component library for Loqate address validation and location services.

Installation

npm install @loqate/react

Usage

Important: You must import the styles in your application entry point:

import '@loqate/react/styles.css'

Then use the components:

import { AddressTypeahead, AddressDidYouMean, StoreFinder, Map } from '@loqate/react'
import { LoqateAddressProvider } from '@loqate/react'

function App() {
  return (
    <LoqateAddressProvider apiKey="your-api-key">
      <AddressTypeahead />
    </LoqateAddressProvider>
  )
}

Available Components

• AddressTypeahead - Address autocomplete input
• AddressDidYouMean - Address verification and suggestion UI
• StoreFinder - Store location finder with map integration
• Map - Interactive map component
• Typeahead - Generic typeahead component

Hooks

Import hooks separately:

import { useLoqateAddress, useLoqateStoreFinder } from '@loqate/react/hooks'

Development

This project uses React + TypeScript + Vite.

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default defineConfig([
  globalIgnores(["dist"]),
  {
    files: ["**/*.{ts,tsx}"],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
]);

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from "eslint-plugin-react-x";
import reactDom from "eslint-plugin-react-dom";

export default defineConfig([
  globalIgnores(["dist"]),
  {
    files: ["**/*.{ts,tsx}"],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs["recommended-typescript"],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
]);