Install the Community Gallery 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 { LegionCommunityGallery } from '@legionhandtech/lht-react-widgets';
2
3function App() {
4 return (
5 <LegionCommunityGallery
6 baseUrl="https://your-legion-domain.com"
7 count={4}
8 theme="light"
9 communityUrl="/community"
10 />
11 );
12}You can also import from the dedicated sub-path:
import { LegionCommunityGallery } from '@legionhandtech/lht-react-widgets/community-gallery';| Prop | Type | Default | Description |
|---|---|---|---|
baseUrl | string | required | Base URL of your Legion deployment |
count | number | 4 | Number of gallery items to display (1–12) |
theme | "light" | "dark" | "light" | Theme preset |
showViewAll | boolean | true | Show the "View all in Gallery" link |
viewAllUrl | string | "/gallery" | URL for the "View all" link |
communityUrl | string | — | URL to open when clicking a media item |
height | string | "auto" | Widget height — "auto" resolves to 200px, or a CSS value like "400px" |
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 |
|---|---|---|
galleryPrimaryColor | --gallery-primary-color | "#228be6" |
galleryBackgroundColor | --gallery-background-color | "#f8f9fa" |
galleryTextColor | --gallery-text-color | "#333" |
galleryOverlayBg | --gallery-overlay-bg | "linear-gradient(transparent, rgba(0,0,0,.6))" |
galleryCardRadius | --gallery-card-radius | "12px" |
galleryCardShadow | --gallery-card-shadow | "0 2px 8px rgba(0,0,0,.1)" |
galleryGap | --gallery-gap | "8px" |
galleryHoverScale | --gallery-hover-scale | "1.03" |
galleryTransitionDuration | --gallery-transition-duration | "0.2s" |
galleryUsernameSize | --gallery-username-size | "12px" |
galleryUsernameColor | --gallery-username-color | "#fff" |
galleryIconSize | --gallery-icon-size | "20px" |
galleryFontFamily | --gallery-font-family | "Inter, sans-serif" |
Use a React ref to call methods on the widget:
1import { useRef } from 'react';
2import { LegionCommunityGallery, LegionCommunityGalleryHandle } from '@legionhandtech/lht-react-widgets';
3
4function App() {
5 const widgetRef = useRef<LegionCommunityGalleryHandle>(null);
6
7 return (
8 <>
9 <button onClick={() => widgetRef.current?.refresh()}>
10 Refresh Gallery
11 </button>
12 <LegionCommunityGallery
13 ref={widgetRef}
14 baseUrl="https://your-legion-domain.com"
15 />
16 </>
17 );
18}| Method | Description |
|---|---|
refresh() | Reloads the widget iframe |
If you prefer the <legion-community-gallery> custom element but want to install via NPM instead of a script tag:
import '@legionhandtech/lht-react-widgets/community-gallery-web-component';Then use it in your HTML or JSX:
1<legion-community-gallery
2 api-url="https://your-legion-domain.com"
3 count="4"
4 theme="light"
5 community-url="/community">
6</legion-community-gallery>The package ships with full TypeScript declarations. All prop interfaces are exported:
1import type {
2 CommunityGalleryWidgetProps,
3 CommunityGalleryThemingProps,
4 LegionCommunityGalleryHandle,
5} from '@legionhandtech/lht-react-widgets';Fired when the widget iframe has loaded. Receives a detail object:
1<LegionCommunityGallery
2 baseUrl="https://your-legion-domain.com"
3 onLoad={(detail) => {
4 console.log(detail.widget); // "community-gallery"
5 console.log(detail.count); // number
6 console.log(detail.theme); // "light" | "dark"
7 }}
8/>Fired if the widget iframe fails to load:
1<LegionCommunityGallery
2 baseUrl="https://your-legion-domain.com"
3 onError={(message) => console.error(message)}
4/>