Community Header Widget – React SDK

Install the Community Header Widget as an NPM package for first-class React (and TypeScript) support. Displays community stats, search bar, and online member indicator.

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

function App() {
  return (
    <LegionCommunityHeader
      baseUrl="https://your-legion-domain.com"
      title="My Community"
      theme="light"
    />
  );
}

You can also import from the dedicated sub-path:

import { LegionCommunityHeader } from '@legionhandtech/lht-react-widgets/community-header';

Props Reference

Core Props

Prop	Type	Default	Description
`baseUrl`	`string`	required	Base URL of your Legion deployment
`title`	`string`	`"Community"`	Community title
`showSearch`	`boolean`	`true`	Show search bar
`showStats`	`boolean`	`true`	Show stats section
`showOnline`	`boolean`	`true`	Show online count
`communityUrl`	`string`	—	Community URL prefix
`theme`	`"light" \| "dark"`	`"light"`	Theme preset
`width`	`string`	`"100%"`	Widget width (CSS value)
`height`	`string`	`"auto"`	Widget height (CSS value)
`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 (selection)

All 18 theming props are optional. Here are the most commonly used ones:

Prop	CSS Variable	Example
`headerPrimaryColor`	`--header-primary-color`	`"#228be6"`
`headerBackgroundColor`	`--header-background-color`	`"#ffffff"`
`headerTextColor`	`--header-text-color`	`"#1a1b1e"`
`headerSearchBg`	`--header-search-bg`	`"#f1f3f5"`
`headerSearchRadius`	`--header-search-radius`	`"8px"`
`headerStatBg`	`--header-stat-bg`	`"#f8f9fa"`
`headerFontFamily`	`--header-font-family`	`"Inter, sans-serif"`
`headerTitleSize`	`--header-title-size`	`"1.5rem"`

See the TypeScript CommunityHeaderThemingProps interface for the complete list.

Imperative Ref API

import { useRef } from 'react';
import { LegionCommunityHeader, LegionCommunityHeaderHandle } from '@legionhandtech/lht-react-widgets';

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

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

Method	Description
`refresh()`	Reloads the widget iframe

Web Component (from NPM)

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

<legion-community-header
  api-url="https://your-legion-domain.com"
  title="My Community"
  theme="light">
</legion-community-header>

TypeScript

import type {
  CommunityHeaderWidgetProps,
  CommunityHeaderThemingProps,
  LegionCommunityHeaderHandle,
} from '@legionhandtech/lht-react-widgets';

Callbacks

onLoad

<LegionCommunityHeader
  baseUrl="https://your-legion-domain.com"
  onLoad={(detail) => {
    console.log(detail.widget);  // "community-header"
    console.log(detail.theme);   // "light" | "dark"
  }}
/>

onError

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