在庫検索ツール

Stock Locator Tool は React コンポーネントで、指定したメーカー部品番号に対するリアルタイムの価格と在庫状況（在庫数、価格帯、ディストリビューターへのリンク）を表示します。Octopart API を利用しており、製品ページ、調達ツール、または任意の React アプリケーションに組み込めます。

前提条件

• React プロジェクト

• supply.domain スコープを持つ OAuth 2.0 アクセストークン（直接 API クエリに使用するものと同じトークン。認可 を参照）

インストール

npm i @altiumnexar/stock-locator-tool

基本的な使い方

import { StockLocatorTool } from "@altiumnexar/stock-locator-tool";

function MyPage() {
  return (
    <StockLocatorTool
      searchParameters={{ token: "YOUR_ACCESS_TOKEN" }}
    />
  );
}

これにより、ユーザーが任意の MPN を入力して、ライブのオファーと在庫を確認できる完全な検索インターフェースが表示されます。

単一部品モード

部品を事前入力し、検索バーを非表示にするには、製品詳細ページなどで便利です。

<StockLocatorTool
  searchParameters={{
    token: "YOUR_ACCESS_TOKEN",
    q: "LM358DR",
    disableSearch: true,
  }}
/>

トークンの取り扱い

アクセストークンの有効期限は 24 時間です。開発中は一時的にトークンをハードコードできます。本番環境では、client_credentials 付与を通じてバックエンドからトークンを取得し、有効期限が切れる前に更新してください。Client Secret をクライアントサイドのコードで絶対に公開しないでください。

詳細なリファレンス

GitHub リポジトリには、利用可能なすべての props が記載されています。

• searchParameters – 地域、通貨、正規品／在庫ありフィルター、検索バーの表示設定、オファー件数上限など

• styles – ライト／ダークテーマ、フォント、完全なカスタムカラートークンのリファレンス

• hideColumns – オファーテーブルに表示する列を制御