Install the Social Widget as an NPM package for first-class React (and TypeScript) support.
npm install @legionhandtech/lht-react-widgetsReact 17+ is a peer dependency. If your project already has React installed you're good to go.
1import { LegionSocial } from '@legionhandtech/lht-react-widgets';
2
3function App() {
4 return (
5 <LegionSocial
6 baseUrl="https://your-legion-domain.com"
7 authToken="your-jwt-token"
8 layout="feed"
9 channel="announcements"
10 theme="light"
11 />
12 );
13}1<LegionSocial
2 baseUrl="https://your-legion-domain.com"
3 layout="grid"
4 rows={3}
5 cols={3}
6 communityUrl="/community"
7 theme="light"
8/>You can also import from the dedicated sub-path:
import { LegionSocial } from '@legionhandtech/lht-react-widgets/social';| Prop | Type | Default | Description |
|---|---|---|---|
baseUrl | string | required | Base URL of your Legion deployment |
authToken | string | — | JWT auth token for authenticated features (feed layout only) |
theme | "light" | "dark" | "light" | Theme preset |
layout | "feed" | "grid" | "feed" | Layout mode |
rows | number | 3 | Number of grid rows (grid layout only) |
cols | number | 3 | Number of grid columns (grid layout only) |
communityUrl | string | — | URL for community page click-throughs (grid layout) |
channel | string | — | Filter feed/grid to a specific channel |
width | string | "600px" | Widget width (CSS value) |
height | string | "800px" | 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 |
All 56 theming props are optional. Here are the most commonly used ones:
| Prop | CSS Variable | Example |
|---|---|---|
socialPrimaryColor | --social-primary-color | "#228be6" |
socialBackgroundColor | --social-background-color | "#f8f9fa" |
socialTextColor | --social-text-color | "#333" |
socialCardBg | --social-card-bg | "#fff" |
socialCardRadius | --social-card-radius | "12px" |
socialCardShadow | --social-card-shadow | "0 2px 8px rgba(0,0,0,.1)" |
socialAvatarSize | --social-avatar-size | "40px" |
socialGridGap | --social-grid-gap | "4px" |
socialGridRadius | --social-grid-radius | "8px" |
socialButtonBg | --social-button-bg | "#228be6" |
socialButtonRadius | --social-button-radius | "6px" |
socialFontFamily | --social-font-family | "Inter, sans-serif" |
socialBorderRadius | --social-border-radius | "12px" |
See the TypeScript SocialThemingProps interface for the complete list.
1import { useRef } from 'react';
2import { LegionSocial, LegionSocialHandle } from '@legionhandtech/lht-react-widgets';
3
4function App() {
5 const widgetRef = useRef<LegionSocialHandle>(null);
6
7 return (
8 <>
9 <button onClick={() => widgetRef.current?.refresh()}>
10 Refresh Feed
11 </button>
12 <LegionSocial
13 ref={widgetRef}
14 baseUrl="https://your-legion-domain.com"
15 layout="feed"
16 />
17 </>
18 );
19}| Method | Description |
|---|---|
refresh() | Reloads the widget iframe |
import '@legionhandtech/lht-react-widgets/social-web-component';1<legion-social
2 api-url="https://your-legion-domain.com"
3 layout="feed"
4 auth-token="your-jwt-token"
5 channel="announcements"
6 theme="light">
7</legion-social>1import type {
2 SocialWidgetProps,
3 SocialThemingProps,
4 LegionSocialHandle,
5} from '@legionhandtech/lht-react-widgets';1<LegionSocial
2 baseUrl="https://your-legion-domain.com"
3 layout="grid"
4 onLoad={(detail) => {
5 console.log(detail.widget); // "social"
6 console.log(detail.layout); // "feed" | "grid"
7 console.log(detail.theme); // "light" | "dark"
8 }}
9/>1<LegionSocial
2 baseUrl="https://your-legion-domain.com"
3 onError={(message) => console.error(message)}
4/>