AutoSugges

@autosugges/client

AutoSugges：エッジオートコンプリート API と無料の参照データセット（国、NAICS、空港、通貨など）を、1 つの React／React Native／HTML コンポーネントで利用できます。

ドキュメント：https://docs.autosugges.com · データセット：https://autosugges.com

npm i @autosugges/client

YOUR_PUBLISHABLE_KEY を https://app.autosugges.com の無料キーに置き換えてください。キーはリストごとに 1 つ必要で、 サイトのオリジンに制限されます。公開キーはブラウザーで安全に使用できます。

React / Next.js

'use client';
import { useState } from 'react';
import { AutoSugges } from '@autosugges/client/react';
import { AutosuggesProvider, type AutoSuggesValue } from '@autosugges/client/react-core';

export function CountryField() {
  const [country, setCountry] = useState<AutoSuggesValue>(null);
  return (
    <AutosuggesProvider lists={{ countries: 'YOUR_PUBLISHABLE_KEY' }}>
      <AutoSugges list="countries" value={country} onChange={setCountry} />
    </AutosuggesProvider>
  );
}

value は選択した項目全体を表します（複数選択リストの場合は配列です）。最小 文字数、デバウンス、項目の作成可否、複数選択などの動作はリストのサーバーポリシーで決まり、 overrides で変更できるのは制限する場合のみです。

Expo / React Native

import { AutoSugges } from '@autosugges/client/native-ui';
import { AutosuggesProvider } from '@autosugges/client/react-core';
// same props as web: <AutoSugges list="countries" value={value} onChange={setValue} />

ボトムシート表示用のオプションのピア依存関係：@gorhom/bottom-sheet、 react-native-gesture-handler、react-native-reanimated。

Plain HTML

<script src="https://cdn.jsdelivr.net/npm/@autosugges/client/dist/browser/autosugges.js"></script>
<input
  data-autosugges-key="YOUR_PUBLISHABLE_KEY"
  data-autosugges-base-url="https://runtime.autosugges.com"
  data-autosugges-placeholder="Country"
/>

SRI ハッシュ付きのセルフホスト可能なコピー：https://autosugges.com/sdk/v1/autosugges.js。その他の属性： data-autosugges-theme（light|dark）、-locale、-label、-parent、-access-token。後からマークアップを挿入した場合は、 window.AutoSugges.autoInit() を呼び出してください。

エントリーポイント

.（クライアント、コンボボックス状態マシン） · ./react · ./react-core · ./native · ./native-ui · ./browser。CSS カスタムプロパティ（--as-color-text、--as-font-sans など）でスタイルを設定できます。詳細はドキュメントをご覧ください。

MIT © AKHBaig