Documentation | Legion Hand Technologies

Install the Opportunities Widget as an NPM package for first-class React (and TypeScript) support.

Installation

npm install @legionhandtech/lht-react-widgets

React 17+ is a peer dependency. If your project already has React installed you're good to go.

Quick Start

import { LegionOpportunities } from '@legionhandtech/lht-react-widgets';

function App() {
  return (
    <LegionOpportunities
      baseUrl="https://your-legion-domain.com"
      count={5}
      layout="horizontal"
      theme="light"
      tags="retail,food"
    />
  );
}

Props Reference

Core Props

Prop	Type	Default	Description
`baseUrl`	`string`	required	Base URL of your Legion deployment
`count`	`number`	`5`	Number of opportunities to display (1–20)
`layout`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout direction
`tags`	`string`	—	Comma-separated list of tags to filter by
`theme`	`"light" \| "dark" \| "minimal" \| "bold" \| "corporate" \| "vibrant"`	`"light"`	Preset theme
`height`	`string`	`"auto"`	Widget height — `"auto"`, `"100%"`, or a CSS value like `"400px"`
`apiKey`	`string`	—	Optional API key for authenticated content
`className`	`string`	—	CSS class applied to the outer container
`style`	`React.CSSProperties`	—	Inline styles merged into the container
`onLoad`	`(detail) => void`	—	Called when the widget iframe finishes loading
`onError`	`(message: string) => void`	—	Called if the widget iframe fails to load

Theming Props

All theming props are optional. When omitted the widget uses its built-in defaults.

Panel

Prop	CSS Variable	Example
`oppPanelStart`	`--opp-panel-start`	`"0.6"`
`oppPanelMid`	`--opp-panel-mid`	`"0.45"`
`oppPanelEnd`	`--opp-panel-end`	`"0.25"`
`oppPanelColor`	`--opp-panel-color`	`"0, 0, 0"` (RGB)
`oppPanelShadow`	`--opp-panel-shadow`	`"0 8px 28px rgba(0,0,0,.45)"`
`oppPanelBlur`	`--opp-panel-blur`	`"2px"`
`oppPanelRadius`	`--opp-panel-radius`	`"10px"`
`oppPanelPadding`	`--opp-panel-padding`	`"12px"`
`oppPanelMaxWidth`	`--opp-panel-max-width`	`"600px"`

Card

Prop	CSS Variable	Example
`oppCardRadius`	`--opp-card-radius`	`"12px"`
`oppCardShadow`	`--opp-card-shadow`	`"0 4px 12px rgba(0,0,0,.2)"`
`oppCardBorder`	`--opp-card-border`	`"1px solid #333"`
`oppCardMinHeight`	`--opp-card-min-height`	`"240px"`

Title Typography

Prop	CSS Variable	Example
`oppTitleSize`	`--opp-title-size`	`"clamp(18px, 2.6vmin, 36px)"`
`oppTitleColor`	`--opp-title-color`	`"#ffffff"`
`oppTitleWeight`	`--opp-title-weight`	`"700"`
`oppTitleShadow`	`--opp-title-shadow`	`"0 1px 3px rgba(0,0,0,.3)"`
`oppTitleFontFamily`	`--opp-title-font-family`	`"Inter, sans-serif"`
`oppTitleLetterSpacing`	`--opp-title-letter-spacing`	`"-0.02em"`

Description Typography

Prop	CSS Variable	Example
`oppDescriptionSize`	`--opp-description-size`	`"14px"`
`oppDescriptionColor`	`--opp-description-color`	`"#ccc"`
`oppDescriptionShadow`	`--opp-description-shadow`	`"none"`
`oppDescriptionFontFamily`	`--opp-description-font-family`	`"Inter, sans-serif"`
`oppDescriptionLineHeight`	`--opp-description-line-height`	`"1.5"`

Expires Typography

Prop	CSS Variable	Example
`oppExpiresSize`	`--opp-expires-size`	`"12px"`
`oppExpiresColor`	`--opp-expires-color`	`"#aaa"`
`oppExpiresShadow`	`--opp-expires-shadow`	`"none"`

Button

Prop	CSS Variable	Example
`oppButtonBg`	`--opp-button-bg`	`"#3b82f6"`
`oppButtonColor`	`--opp-button-color`	`"#fff"`
`oppButtonRadius`	`--opp-button-radius`	`"8px"`
`oppButtonShadow`	`--opp-button-shadow`	`"0 2px 6px rgba(0,0,0,.2)"`

Animation

Prop	CSS Variable	Example
`oppTransitionDuration`	`--opp-transition-duration`	`"0.3s"`
`oppAnimationScale`	`--opp-animation-scale`	`"1.02"`

Preset Themes

Use the theme prop for quick preset styling instead of individual theming props:

Theme	Description
`light`	Default light theme
`dark`	Higher contrast dark overlay
`minimal`	Subtle overlay, no shadows
`bold`	High contrast, larger typography
`corporate`	Professional, minimal animations
`vibrant`	Colored overlay with glow effects

<LegionOpportunities
  baseUrl="https://your-legion-domain.com"
  theme="dark"
  count={5}
/>

Imperative Ref API

Use a React ref to call methods on the widget:

import { useRef } from 'react';
import { LegionOpportunities, LegionOpportunitiesHandle } from '@legionhandtech/lht-react-widgets';

function App() {
  const widgetRef = useRef<LegionOpportunitiesHandle>(null);

  return (
    <>
      <button onClick={() => widgetRef.current?.refresh()}>
        Refresh Widget
      </button>
      <LegionOpportunities
        ref={widgetRef}
        baseUrl="https://your-legion-domain.com"
      />
    </>
  );
}

Available Methods

Method	Description
`refresh()`	Reloads the widget iframe

Web Component (from NPM)

If you prefer the <legion-opportunities> custom element but want to install via NPM instead of a script tag:

import '@legionhandtech/lht-react-widgets/web-component';

Then use it in your HTML or JSX:

<legion-opportunities
  base-url="https://your-legion-domain.com"
  count="5"
  layout="horizontal"
  theme="light">
</legion-opportunities>

TypeScript

The package ships with full TypeScript declarations. All prop interfaces are exported:

import type {
  OpportunitiesWidgetProps,
  OpportunitiesThemingProps,
  LegionOpportunitiesHandle,
} from '@legionhandtech/lht-react-widgets';

Callbacks

onLoad

Fired when the widget iframe has loaded. Receives a detail object:

<LegionOpportunities
  baseUrl="https://your-legion-domain.com"
  onLoad={(detail) => {
    console.log(detail.widget);  // "opportunities"
    console.log(detail.count);   // number
    console.log(detail.layout);  // "horizontal" | "vertical"
    console.log(detail.tags);    // string
  }}
/>

onError

Fired if the widget iframe fails to load:

<LegionOpportunities
  baseUrl="https://your-legion-domain.com"
  onError={(message) => console.error(message)}
/>

Opportunities Widget – React SDK