Install the Matrix Widget (site-wide notification feed) 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 { LegionMatrix } from '@legionhandtech/lht-react-widgets';
2
3function App() {
4 return (
5 <LegionMatrix
6 baseUrl="https://your-legion-domain.com"
7 theme="light"
8 emptyTitle="You're all caught up"
9 emptyIcon="bell"
10 />
11 );
12}You can also import from the dedicated sub-path:
import { LegionMatrix } from '@legionhandtech/lht-react-widgets/matrix';| Prop | Type | Default | Description |
|---|---|---|---|
baseUrl | string | required | Base URL of your Legion deployment |
theme | "light" | "dark" | "light" | Theme preset |
emptyTitle | string | "You're all caught up" | Title shown in empty state |
emptySubtitle | string | "No updates right now" | Subtitle shown in empty state |
accentColor | string | "blue" (light) / "gray" (dark) | Accent color name |
emptyIcon | "bell" | "gift" | "activity" | "trophy" | "bell" | Icon for empty state |
width | string | "100%" | Widget width (CSS value) |
height | string | "400px" | 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 45 theming props are optional. Here are the most commonly used ones:
| Prop | CSS Variable | Example |
|---|---|---|
matrixPrimaryColor | --matrix-primary-color | "#228be6" |
matrixBackgroundColor | --matrix-background-color | "#f8f9fa" |
matrixTextColor | --matrix-text-color | "#333" |
matrixCardBg | --matrix-card-bg | "#fff" |
matrixCardRadius | --matrix-card-radius | "12px" |
matrixCardShadow | --matrix-card-shadow | "0 2px 8px rgba(0,0,0,.1)" |
matrixIconBg | --matrix-icon-bg | "#e7f5ff" |
matrixIconColor | --matrix-icon-color | "#228be6" |
matrixFontFamily | --matrix-font-family | "Inter, sans-serif" |
matrixBorderRadius | --matrix-border-radius | "12px" |
matrixButtonBg | --matrix-button-bg | "#228be6" |
matrixButtonRadius | --matrix-button-radius | "6px" |
See the TypeScript MatrixThemingProps interface for the complete list.
1import { useRef } from 'react';
2import { LegionMatrix, LegionMatrixHandle } from '@legionhandtech/lht-react-widgets';
3
4function App() {
5 const widgetRef = useRef<LegionMatrixHandle>(null);
6
7 return (
8 <>
9 <button onClick={() => widgetRef.current?.refresh()}>
10 Refresh Feed
11 </button>
12 <LegionMatrix
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/matrix-web-component';1<legion-matrix
2 base-url="https://your-legion-domain.com"
3 theme="light"
4 empty-title="You're all caught up"
5 empty-icon="bell"
6 accent-color="blue">
7</legion-matrix>1import type {
2 MatrixWidgetProps,
3 MatrixThemingProps,
4 LegionMatrixHandle,
5} from '@legionhandtech/lht-react-widgets';1<LegionMatrix
2 baseUrl="https://your-legion-domain.com"
3 onLoad={(detail) => {
4 console.log(detail.widget); // "matrix"
5 console.log(detail.theme); // "light" | "dark"
6 }}
7/>1<LegionMatrix
2 baseUrl="https://your-legion-domain.com"
3 onError={(message) => console.error(message)}
4/>