Documentation | Legion Hand Technologies

Install the Profile Widget (user profile viewer) 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 { LegionProfile } from '@legionhandtech/lht-react-widgets';

function App() {
  return (
    <LegionProfile
      baseUrl="https://your-legion-domain.com"
      authToken="your-jwt-token"
      theme="light"
    />
  );
}

You can also import from the dedicated sub-path:

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

Props Reference

Core Props

Prop	Type	Default	Description
`baseUrl`	`string`	required	Base URL of your Legion instance
`authToken`	`string`	—	JWT token for authenticated profile viewing (sent via postMessage)
`theme`	`"light" \| "dark"`	`"light"`	Preset theme
`width`	`string`	`"400px"`	Widget width CSS value
`height`	`string`	`"400px"`	Widget height CSS value
`className`	`string`	—	CSS class on the wrapper div
`style`	`React.CSSProperties`	—	Inline styles on the wrapper div
`onLoad`	`(detail) => void`	—	Fires when the widget iframe loads
`onError`	`(message: string) => void`	—	Fires when the widget iframe fails to load

Theming Props

Fine-grained CSS-variable theming. All props are optional strings.

Prop	CSS Variable	Description
`profileBackgroundColor`	`profile-background-color`	Container background
`profileTextColor`	`profile-text-color`	Primary text color
`profileSecondaryTextColor`	`profile-secondary-text-color`	Secondary text
`profileBorderColor`	`profile-border-color`	Border color
`profileBorderRadius`	`profile-border-radius`	Container radius
`profilePadding`	`profile-padding`	Container padding
`profileShadow`	`profile-shadow`	Container shadow
`profilePrimaryColor`	`profile-primary-color`	Primary accent
`profilePrimaryHover`	`profile-primary-hover`	Primary hover
`profileAccentColor`	`profile-accent-color`	Accent color
`profileCardBg`	`profile-card-bg`	Card background
`profileCardBorder`	`profile-card-border`	Card border
`profileCardRadius`	`profile-card-radius`	Card radius
`profileCardShadow`	`profile-card-shadow`	Card shadow
`profileCardPadding`	`profile-card-padding`	Card padding
`profileAvatarSize`	`profile-avatar-size`	Avatar size
`profileAvatarRadius`	`profile-avatar-radius`	Avatar radius
`profileAvatarBorder`	`profile-avatar-border`	Avatar border
`profileAvatarShadow`	`profile-avatar-shadow`	Avatar shadow
`profileHeaderBg`	`profile-header-bg`	Header background
`profileHeaderHeight`	`profile-header-height`	Header height
`profileBadgeBg`	`profile-badge-bg`	Badge background
`profileBadgeColor`	`profile-badge-color`	Badge text
`profileBadgeRadius`	`profile-badge-radius`	Badge radius
`profileStatBg`	`profile-stat-bg`	Stat background
`profileStatBorder`	`profile-stat-border`	Stat border
`profileStatValueColor`	`profile-stat-value-color`	Stat value color
`profileStatLabelColor`	`profile-stat-label-color`	Stat label color
`profileTabActiveBg`	`profile-tab-active-bg`	Active tab bg
`profileTabActiveColor`	`profile-tab-active-color`	Active tab text
`profileTabColor`	`profile-tab-color`	Tab text color
`profileTabHoverBg`	`profile-tab-hover-bg`	Tab hover bg
`profileTabRadius`	`profile-tab-radius`	Tab radius
`profileButtonBg`	`profile-button-bg`	Button background
`profileButtonHoverBg`	`profile-button-hover-bg`	Button hover bg
`profileButtonColor`	`profile-button-color`	Button text
`profileButtonRadius`	`profile-button-radius`	Button radius
`profileFontFamily`	`profile-font-family`	Font family
`profileNameSize`	`profile-name-size`	Name font size
`profileNameWeight`	`profile-name-weight`	Name font weight
`profileUsernameSize`	`profile-username-size`	Username size
`profileBioSize`	`profile-bio-size`	Bio font size
`profileStatSize`	`profile-stat-size`	Stat font size
`profileLabelSize`	`profile-label-size`	Label font size
`profileDividerColor`	`profile-divider-color`	Divider color
`profileTransitionDuration`	`profile-transition-duration`	Transition timing
`profileHoverScale`	`profile-hover-scale`	Hover scale factor

Imperative Ref

import { useRef } from 'react';
import { LegionProfile } from '@legionhandtech/lht-react-widgets';
import type { LegionProfileHandle } from '@legionhandtech/lht-react-widgets';

function App() {
  const ref = useRef<LegionProfileHandle>(null);

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

Web Component

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

<legion-profile
  api-url="https://your-legion-domain.com"
  auth-token="your-jwt-token"
  theme="light"
  width="400"
  height="400">
</legion-profile>

Authentication

The Profile widget uses postMessage to securely deliver the JWT auth token to the iframe after it loads. The token is never included in the URL. Pass the authToken prop and the component handles the rest.

Profile Widget – React SDK