Bestandsortungs-Tool

Das Stock Locator Tool ist eine React-Komponente, die Echtzeit-Preise und -Verfügbarkeit für eine angegebene Hersteller-Teilenummer anzeigt – Lagerbestände, Preisstaffeln und Distributor-Links – bereitgestellt über die Octopart API. Betten Sie es in Produktseiten, Beschaffungstools oder jede beliebige React-Anwendung ein.

Voraussetzungen

• Ein React-Projekt

• Ein OAuth-2.0-Access-Token mit dem supply.domain Geltungsbereich – dasselbe Token, das für direkte API-Abfragen verwendet wird (siehe Autorisierung)

Installation

npm i @altiumnexar/stock-locator-tool

Grundlegende Verwendung

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

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

Dies rendert eine vollständige Suchoberfläche, in der Benutzer eine beliebige MPN eingeben können, um Live-Angebote und Bestände zu sehen.

Einzelteil-Modus

Um ein Teil vorab auszufüllen und die Suchleiste auszublenden – nützlich auf einer Produktdetailseite:

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

Token-Verwaltung

Access-Tokens laufen nach 24 Stunden ab. Während der Entwicklung können Sie vorübergehend ein Token fest im Code hinterlegen. In der Produktion rufen Sie das Token über Ihren Backend-Service mithilfe des client_credentials grant ab und aktualisieren es vor Ablauf. Legen Sie Ihr Client Secret niemals in clientseitigem Code offen.

Weitere Referenzen

Das GitHub-Repository dokumentiert alle verfügbaren Props:

• searchParameters – Region, Währung, Filter für autorisierte Anbieter bzw. Lagerbestand, Sichtbarkeit der Suchleiste, Angebotslimit und mehr

• styles – helles/dunkles Theme, Schriftart und vollständige Referenz der benutzerdefinierten Farb-Tokens

• hideColumns – steuern, welche Spalten in der Angebotstabelle angezeigt werden