Documentation | Legion Hand Technologies

Install the Campaigns Carousel Widget as an NPM package for first-class React (and TypeScript) support. Features gradient-styled campaign cards with configurable display limits and expiration badges.

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 { LegionCampaignsCarousel } from '@legionhandtech/lht-react-widgets';

function App() {
  return (
    <LegionCampaignsCarousel
      baseUrl="https://your-legion-domain.com"
      maxCampaigns={5}
      theme="light"
    />
  );
}

You can also import from the dedicated sub-path:

import { LegionCampaignsCarousel } from '@legionhandtech/lht-react-widgets/campaigns-carousel';

Props Reference

Core Props

Prop	Type	Default	Description
`baseUrl`	`string`	required	Base URL of your Legion deployment
`apiKey`	`string`	—	API key for authorization
`maxCampaigns`	`number`	`5`	Maximum campaigns to show
`showExpiration`	`boolean`	`true`	Whether to show expiration dates
`theme`	`"light" \| "dark"`	`"light"`	Theme preset
`width`	`string`	`"100%"`	Widget width (CSS value)
`height`	`number`	`280`	Widget height in pixels
`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 8 theming props are optional. Unlike other widgets, the carousel uses camelCase parameters.

Prop	Query Param	Example
`panelStart`	`panelStart`	`"#1a1b5e"`
`panelMid`	`panelMid`	`"#2d2f8e"`
`panelEnd`	`panelEnd`	`"#4a4dc4"`
`panelShadow`	`panelShadow`	`"0 4px 12px rgba(0,0,0,0.3)"`
`titleSize`	`titleSize`	`"1.5rem"`
`descriptionSize`	`descriptionSize`	`"0.9rem"`
`titleShadow`	`titleShadow`	`"0 2px 4px rgba(0,0,0,0.5)"`
`descriptionShadow`	`descriptionShadow`	`"0 1px 2px rgba(0,0,0,0.3)"`

See the TypeScript CampaignsCarouselThemingProps interface for the complete list.

Imperative Ref API

import { useRef } from 'react';
import { LegionCampaignsCarousel, LegionCampaignsCarouselHandle } from '@legionhandtech/lht-react-widgets';

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

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

Method	Description
`refresh()`	Reloads the widget iframe

Web Component (from NPM)

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

<legion-campaigns-carousel
  api-url="https://your-legion-domain.com"
  max-campaigns="5"
  theme="light">
</legion-campaigns-carousel>

TypeScript

import type {
  CampaignsCarouselWidgetProps,
  CampaignsCarouselThemingProps,
  LegionCampaignsCarouselHandle,
} from '@legionhandtech/lht-react-widgets';

Callbacks

onLoad

<LegionCampaignsCarousel
  baseUrl="https://your-legion-domain.com"
  onLoad={(detail) => {
    console.log(detail.widget);        // "campaigns-carousel"
    console.log(detail.maxCampaigns);  // 5
    console.log(detail.theme);         // "light" | "dark"
  }}
/>

onError

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

Campaigns Carousel Widget – React SDK