Install the Q&A 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 { LegionQA } from '@legionhandtech/lht-react-widgets';
2
3function App() {
4 return (
5 <LegionQA
6 baseUrl="https://your-legion-domain.com"
7 productId="product-123"
8 username="John"
9 theme="light"
10 />
11 );
12}You can also import from the dedicated sub-path:
import { LegionQA } from '@legionhandtech/lht-react-widgets/qa';| Prop | Type | Default | Description |
|---|---|---|---|
baseUrl | string | required | Base URL of your Legion deployment |
authToken | string | — | JWT auth token for authenticated features |
productId | string | — | Product ID to scope questions to a specific product |
username | string | "Anonymous" | Display name for the user |
pageSize | number | 5 | Number of items per page |
theme | "light" | "dark" | "light" | Theme preset |
showSearch | boolean | true | Show the search bar |
showAskButton | boolean | true | Show the "Ask a Question" button |
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 theming props are optional. When omitted the widget uses its built-in defaults.
| Prop | CSS Variable | Example |
|---|---|---|
qaPrimaryColor | --qa-primary-color | "#228be6" |
qaBackgroundColor | --qa-background-color | "#f8f9fa" |
qaTextColor | --qa-text-color | "#333" |
qaSecondaryTextColor | --qa-secondary-text-color | "#666" |
qaBorderColor | --qa-border-color | "#dee2e6" |
qaStaffBadgeColor | --qa-staff-badge-color | "#e03131" |
qaAcceptedColor | --qa-accepted-color | "#2f9e44" |
qaTitleSize | --qa-title-size | "clamp(16px, 2vmin, 20px)" |
qaBodySize | --qa-body-size | "14px" |
qaMetaSize | --qa-meta-size | "12px" |
qaFontFamily | --qa-font-family | "Inter, sans-serif" |
qaCardPadding | --qa-card-padding | "16px" |
qaCardGap | --qa-card-gap | "12px" |
qaBorderRadius | --qa-border-radius | "8px" |
qaCardShadow | --qa-card-shadow | "0 2px 8px rgba(0,0,0,.1)" |
qaButtonRadius | --qa-button-radius | "4px" |
qaVoteButtonSize | --qa-vote-button-size | "28px" |
Use a React ref to call methods on the widget:
1import { useRef } from 'react';
2import { LegionQA, LegionQAHandle } from '@legionhandtech/lht-react-widgets';
3
4function App() {
5 const widgetRef = useRef<LegionQAHandle>(null);
6
7 return (
8 <>
9 <button onClick={() => widgetRef.current?.refresh()}>
10 Refresh Q&A
11 </button>
12 <LegionQA
13 ref={widgetRef}
14 baseUrl="https://your-legion-domain.com"
15 productId="product-123"
16 />
17 </>
18 );
19}| Method | Description |
|---|---|
refresh() | Reloads the widget iframe |
If you prefer the <legion-qa> custom element but want to install via NPM instead of a script tag:
import '@legionhandtech/lht-react-widgets/qa-web-component';Then use it in your HTML or JSX:
1<legion-qa
2 api-url="https://your-legion-domain.com"
3 product-id="product-123"
4 username="John"
5 theme="light">
6</legion-qa>The package ships with full TypeScript declarations. All prop interfaces are exported:
1import type {
2 QAWidgetProps,
3 QAThemingProps,
4 LegionQAHandle,
5} from '@legionhandtech/lht-react-widgets';Fired when the widget iframe has loaded. Receives a detail object:
1<LegionQA
2 baseUrl="https://your-legion-domain.com"
3 onLoad={(detail) => {
4 console.log(detail.widget); // "qa"
5 console.log(detail.theme); // "light" | "dark"
6 }}
7/>Fired if the widget iframe fails to load:
1<LegionQA
2 baseUrl="https://your-legion-domain.com"
3 onError={(message) => console.error(message)}
4/>