Outil de localisation des stocks

Le Stock Locator Tool est un composant React qui affiche en temps réel les prix et la disponibilité pour une référence fabricant donnée – niveaux de stock, paliers tarifaires et liens vers les distributeurs – alimenté par l’API Octopart. Intégrez-le dans des pages produit, des outils d’approvisionnement ou toute application React.

Prérequis

• Un projet React

• Un jeton d’accès OAuth 2.0 avec la portée supply.domain – le même jeton que celui utilisé pour les requêtes API directes (voir Authorization)

Installation

npm i @altiumnexar/stock-locator-tool

Utilisation de base

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

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

Cela affiche une interface de recherche complète dans laquelle les utilisateurs peuvent saisir n’importe quel MPN pour voir les offres en direct et le stock.

Mode composant unique

Pour préremplir une pièce et masquer la barre de recherche – utile sur une page de détail produit :

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

Gestion du jeton

Les jetons d’accès expirent après 24 heures. Pendant le développement, vous pouvez coder en dur un jeton temporairement. En production, récupérez le jeton depuis votre backend via l’autorisation client_credentials et renouvelez-le avant son expiration. N’exposez jamais votre Client Secret dans le code côté client.

Références supplémentaires

Le GitHub repository documente toutes les props disponibles :

• searchParameters – région, devise, filtres autorisé/en stock, visibilité de la barre de recherche, limite d’offres, etc.

• styles – thème clair/sombre, police et référence complète des tokens de couleur personnalisés

• hideColumns – contrôlez les colonnes qui apparaissent dans le tableau des offres