Install the Community Sidebar Widget as an NPM package for first-class React (and TypeScript) support. Displays community quick links, guidelines, FAQs, and tutorials sidebar.
npm install @legionhandtech/lht-react-widgetsReact 17+ is a peer dependency. If your project already has React installed you're good to go.
1import { LegionCommunitySidebar } from '@legionhandtech/lht-react-widgets';
2
3function App() {
4 return (
5 <LegionCommunitySidebar
6 baseUrl="https://your-legion-domain.com"
7 title="Getting Started"
8 theme="light"
9 />
10 );
11}You can also import from the dedicated sub-path:
import { LegionCommunitySidebar } from '@legionhandtech/lht-react-widgets/community-sidebar';| Prop | Type | Default | Description |
|---|---|---|---|
baseUrl | string | required | Base URL of your Legion deployment |
title | string | "Getting Started" | Sidebar title |
showGuidelines | boolean | true | Show community guidelines link |
showFaqs | boolean | true | Show FAQs link |
showTutorials | boolean | true | Show tutorials link |
showSearchLinks | boolean | true | Show search links section |
communityUrl | string | "/community" | Community URL prefix |
guidelinesUrl | string | "/guidelines" | Guidelines page URL |
faqsUrl | string | "/faqs" | FAQs page URL |
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 |
All 20 theming props are optional. Here are the most commonly used ones:
| Prop | CSS Variable | Example |
|---|---|---|
sidebarPrimaryColor | --sidebar-primary-color | "#228be6" |
sidebarBackgroundColor | --sidebar-background-color | "#ffffff" |
sidebarTextColor | --sidebar-text-color | "#1a1b1e" |
sidebarCardBg | --sidebar-card-bg | "#ffffff" |
sidebarCardRadius | --sidebar-card-radius | "8px" |
sidebarLinkColor | --sidebar-link-color | "#228be6" |
sidebarFontFamily | --sidebar-font-family | "Inter, sans-serif" |
sidebarPadding | --sidebar-padding | "16px" |
See the TypeScript CommunitySidebarThemingProps interface for the complete list.
1import { useRef } from 'react';
2import { LegionCommunitySidebar, LegionCommunitySidebarHandle } from '@legionhandtech/lht-react-widgets';
3
4function App() {
5 const widgetRef = useRef<LegionCommunitySidebarHandle>(null);
6
7 return (
8 <>
9 <button onClick={() => widgetRef.current?.refresh()}>
10 Refresh Sidebar
11 </button>
12 <LegionCommunitySidebar
13 ref={widgetRef}
14 baseUrl="https://your-legion-domain.com"
15 />
16 </>
17 );
18}| Method | Description |
|---|---|
refresh() | Reloads the widget iframe |
import '@legionhandtech/lht-react-widgets/community-sidebar-web-component';1<legion-community-sidebar
2 api-url="https://your-legion-domain.com"
3 title="Getting Started"
4 theme="light">
5</legion-community-sidebar>1import type {
2 CommunitySidebarWidgetProps,
3 CommunitySidebarThemingProps,
4 LegionCommunitySidebarHandle,
5} from '@legionhandtech/lht-react-widgets';1<LegionCommunitySidebar
2 baseUrl="https://your-legion-domain.com"
3 onLoad={(detail) => {
4 console.log(detail.widget); // "community-sidebar"
5 console.log(detail.theme); // "light" | "dark"
6 }}
7/>1<LegionCommunitySidebar
2 baseUrl="https://your-legion-domain.com"
3 onError={(message) => console.error(message)}
4/>