Install the Community Posts Widget as an NPM package for first-class React (and TypeScript) support. Supports authenticated access via postMessage, post filtering, reactions, comments, and full CSS variable theming.
npm install @legionhandtech/lht-react-widgetsReact 17+ is a peer dependency. If your project already has React installed you're good to go.
1import { LegionCommunityPosts } from '@legionhandtech/lht-react-widgets';
2
3function App() {
4 return (
5 <LegionCommunityPosts
6 baseUrl="https://your-legion-domain.com"
7 authToken="your-jwt-token"
8 pageSize={10}
9 theme="light"
10 />
11 );
12}You can also import from the dedicated sub-path:
import { LegionCommunityPosts } from '@legionhandtech/lht-react-widgets/community-posts';| Prop | Type | Default | Description |
|---|---|---|---|
baseUrl | string | required | Base URL of your Legion deployment |
authToken | string | — | JWT / API key for authenticated access (sent via postMessage, never in URL) |
pageSize | number | 10 | Posts per page (5–50) |
filter | "recent" | "popular" | "unanswered" | "recent" | Filter mode |
channelId | string | — | Channel/group ID to filter posts |
showFilters | boolean | true | Show filter bar |
showActions | boolean | true | Show action buttons (like, comment) |
userId | string | — | Current user ID |
username | string | — | Current username |
theme | "light" | "dark" | "light" | Theme preset |
width | string | "100%" | 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 25 theming props are optional. Here are the most commonly used ones:
| Prop | CSS Variable | Example |
|---|---|---|
postsPrimaryColor | --posts-primary-color | "#228be6" |
postsBackgroundColor | --posts-background-color | "#ffffff" |
postsTextColor | --posts-text-color | "#1a1b1e" |
postsCardBg | --posts-card-bg | "#ffffff" |
postsCardRadius | --posts-card-radius | "8px" |
postsAvatarSize | --posts-avatar-size | "40px" |
postsFontFamily | --posts-font-family | "Inter, sans-serif" |
postsTagBg | --posts-tag-bg | "#e9ecef" |
postsLikeColor | --posts-like-color | "#ff6b6b" |
See the TypeScript CommunityPostsThemingProps interface for the complete list.
1import { useRef } from 'react';
2import { LegionCommunityPosts, LegionCommunityPostsHandle } from '@legionhandtech/lht-react-widgets';
3
4function App() {
5 const widgetRef = useRef<LegionCommunityPostsHandle>(null);
6
7 return (
8 <>
9 <button onClick={() => widgetRef.current?.refresh()}>
10 Refresh Posts
11 </button>
12 <LegionCommunityPosts
13 ref={widgetRef}
14 baseUrl="https://your-legion-domain.com"
15 authToken="your-jwt-token"
16 />
17 </>
18 );
19}| Method | Description |
|---|---|
refresh() | Reloads the widget iframe |
import '@legionhandtech/lht-react-widgets/community-posts-web-component';1<legion-community-posts
2 api-url="https://your-legion-domain.com"
3 auth-token="your-jwt-token"
4 page-size="10"
5 theme="light">
6</legion-community-posts>1import type {
2 CommunityPostsWidgetProps,
3 CommunityPostsThemingProps,
4 LegionCommunityPostsHandle,
5} from '@legionhandtech/lht-react-widgets';1<LegionCommunityPosts
2 baseUrl="https://your-legion-domain.com"
3 authToken="your-jwt-token"
4 onLoad={(detail) => {
5 console.log(detail.widget); // "community-posts"
6 console.log(detail.theme); // "light" | "dark"
7 }}
8/>1<LegionCommunityPosts
2 baseUrl="https://your-legion-domain.com"
3 onError={(message) => console.error(message)}
4/>