open-index/open-npm huggingface dataset:
npm package: @loqate/core
Description: <div align="left">     <a href="https://www.speakeasy.com/?utm_source=loqate-core-sdk&utm_campaign=typescript"><img src="https://www.speakeasy.com/assets/badges/built-by-speakeasy.svg" /></a>     <a href="https://opensource.org/licenses/MIT">         <img
Author: Speakeasy
Latest version: 0.0.3-beta.10
npm package: @loqate/react
Description: ⚠️ **IN ALPHA - NOT CURRENTLY FOR RELEASE**
Latest version: 0.0.1-beta.7

# @loqate/react

⚠️ **IN ALPHA - NOT CURRENTLY FOR RELEASE**

React component library for Loqate address validation and location services.

## Installation

```bash
npm install @loqate/react
```

## Usage

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

```tsx
import '@loqate/react/styles.css'
```

Then use the components:

```tsx
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:

```tsx
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:

```js
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](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:

```js
// 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...
    },
  },
]);
```