@flexops/elements

Embeddable React widgets for FlexOps shipping — rate calculator and package tracking.

Installation

npm install @flexops/elements

Quick Start

import { FlexOpsProvider, RateCalculator, TrackingWidget } from '@flexops/elements';

function App() {
  return (
    <FlexOpsProvider config={{ baseUrl: 'https://gateway.flexops.io' }}>
      {/* Rate calculator with pre-filled origin */}
      <RateCalculator
        defaultFromPostalCode="10001"
        onRateSelected={(rate) => console.log('Selected:', rate)}
      />

      {/* Package tracking with a specific token */}
      <TrackingWidget token="your-tracking-token" />
    </FlexOpsProvider>
  );
}

Components

<FlexOpsProvider>

Wraps all FlexOps widgets with configuration and theming.

<FlexOpsProvider
  config={{
    baseUrl: 'https://gateway.flexops.io',  // Required
    apiKey: 'fxk_live_...',              // Optional — for future authenticated endpoints
    theme: {                              // Optional — override default styling
      primaryColor: '#your-brand-color',
      fontFamily: 'Inter, sans-serif',
    },
  }}
>
  {children}
</FlexOpsProvider>

<RateCalculator>

Displays shipping rate estimates from multiple carriers.

Prop	Type	Default	Description
defaultFromPostalCode	string	''	Pre-fill origin ZIP
defaultToPostalCode	string	''	Pre-fill destination ZIP
defaultWeightOz	number	—	Pre-fill weight
showDimensions	boolean	true	Show L/W/H inputs
showCountry	boolean	false	Show country selectors
maxResults	number	unlimited	Limit displayed rates
onRatesFetched	(rates) => void	—	Callback when rates load
onRateSelected	(rate) => void	—	Callback when user clicks a rate
onError	(error) => void	—	Callback on error

<TrackingWidget>

Displays real-time package tracking with workspace branding.

Prop	Type	Default	Description
token	string	—	Tracking link token (auto-loads)
showSearchInput	boolean	true	Show token search input
pollingIntervalMs	number	0	Live update interval (0 = disabled)
showBranding	boolean	true	Show workspace branding
onTrackingLoaded	(data) => void	—	Callback when data loads
onError	(error) => void	—	Callback on error

Theming

Override any theme property via the provider or individual widgets:

const customTheme = {
  primaryColor: '#8b5cf6',
  backgroundColor: '#fafafa',
  borderRadius: '12px',
  fontFamily: 'Inter, sans-serif',
};

<FlexOpsProvider config={{ baseUrl: '...', theme: customTheme }}>
  <RateCalculator />
</FlexOpsProvider>

Available theme properties: primaryColor, secondaryColor, backgroundColor, textColor, mutedTextColor, borderColor, borderRadius, fontFamily, fontSize, successColor, errorColor, warningColor.

Requirements

• React 18+
• Modern browser with fetch API

License

MIT - FlexOps, LLC