Stock Locator Tool

The Stock Locator Tool is a React component that displays real-time pricing and availability for a given manufacturer part number – stock levels, price breaks, and distributor links – powered by the Octopart API. Embed it in product pages, procurement tools, or any React application.

Prerequisites

• A React project

• An OAuth 2.0 access token with the supply.domain scope – the same token used for direct API queries (see Authorization)

Install

npm i @altiumnexar/stock-locator-tool

Basic Usage

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

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

This renders a full search interface where users can enter any MPN to see live offers and stock.

Single-part Mode

To pre-populate a part and hide the search bar – useful on a product detail page:

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

Token Handling

Access tokens expire after 24 hours. During development you can hardcode a token temporarily. In production, fetch the token from your backend via the client_credentials grant and refresh it before expiry. Never expose your Client Secret in client-side code.

Further Reference

The GitHub repository documents all available props:

• searchParameters – region, currency, authorized/in-stock filters, search bar visibility, offer limit, and more

• styles – light/dark theme, font, and full custom color token reference

• hideColumns – control which columns appear in the offer table