Install the Profile Edit Widget (user profile editor) 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 { LegionProfileEdit } from '@legionhandtech/lht-react-widgets';
2
3function App() {
4 return (
5 <LegionProfileEdit
6 baseUrl="https://your-legion-domain.com"
7 authToken="your-jwt-token"
8 theme="light"
9 />
10 );
11}You can also import from the dedicated sub-path:
import { LegionProfileEdit } from '@legionhandtech/lht-react-widgets/profile-edit';| Prop | Type | Default | Description |
|---|---|---|---|
baseUrl | string | required | Base URL of your Legion instance |
authToken | string | — | JWT token for authenticated profile editing (sent via postMessage) |
theme | "light" | "dark" | "light" | Preset theme |
width | string | "600px" | Widget width CSS value |
height | string | "800px" | Widget height CSS value |
className | string | — | CSS class on the wrapper div |
style | React.CSSProperties | — | Inline styles on the wrapper div |
onLoad | (detail) => void | — | Fires when the widget iframe loads |
onError | (message: string) => void | — | Fires when the widget iframe fails to load |
Fine-grained CSS-variable theming. All props are optional strings.
| Prop | CSS Variable | Description |
|---|---|---|
profileEditBackgroundColor | profile-background-color | Container background |
profileEditTextColor | profile-text-color | Primary text color |
profileEditSecondaryTextColor | profile-secondary-text-color | Secondary text |
profileEditBorderColor | profile-border-color | Border color |
profileEditBorderRadius | profile-border-radius | Container radius |
profileEditPadding | profile-padding | Container padding |
profileEditShadow | profile-shadow | Container shadow |
profileEditPrimaryColor | profile-primary-color | Primary accent |
profileEditPrimaryHover | profile-primary-hover | Primary hover |
profileEditAccentColor | profile-accent-color | Accent color |
profileEditCardBg | profile-card-bg | Card background |
profileEditCardBorder | profile-card-border | Card border |
profileEditCardRadius | profile-card-radius | Card radius |
profileEditCardShadow | profile-card-shadow | Card shadow |
profileEditCardPadding | profile-card-padding | Card padding |
profileEditAvatarSize | profile-avatar-size | Avatar size |
profileEditAvatarRadius | profile-avatar-radius | Avatar radius |
profileEditAvatarBorder | profile-avatar-border | Avatar border |
profileEditAvatarShadow | profile-avatar-shadow | Avatar shadow |
profileEditButtonBg | profile-button-bg | Button background |
profileEditButtonHoverBg | profile-button-hover-bg | Button hover bg |
profileEditButtonColor | profile-button-color | Button text |
profileEditButtonRadius | profile-button-radius | Button radius |
profileEditButtonSecondaryBg | profile-button-secondary-bg | Secondary button bg |
profileEditButtonSecondaryColor | profile-button-secondary-color | Secondary button text |
profileEditInputBg | profile-input-bg | Input background |
profileEditInputBorder | profile-input-border | Input border |
profileEditInputFocusBorder | profile-input-focus-border | Input focus border |
profileEditInputRadius | profile-input-radius | Input radius |
profileEditInputText | profile-input-text | Input text color |
profileEditInputPlaceholder | profile-input-placeholder | Input placeholder |
profileEditFontFamily | profile-font-family | Font family |
profileEditNameSize | profile-name-size | Name font size |
profileEditNameWeight | profile-name-weight | Name font weight |
profileEditLabelSize | profile-label-size | Label font size |
profileEditDividerColor | profile-divider-color | Divider color |
profileEditTransitionDuration | profile-transition-duration | Transition timing |
1import { useRef } from 'react';
2import { LegionProfileEdit } from '@legionhandtech/lht-react-widgets';
3import type { LegionProfileEditHandle } from '@legionhandtech/lht-react-widgets';
4
5function App() {
6 const ref = useRef<LegionProfileEditHandle>(null);
7
8 return (
9 <>
10 <button onClick={() => ref.current?.refresh()}>Reload</button>
11 <LegionProfileEdit ref={ref} baseUrl="https://your-legion-domain.com" />
12 </>
13 );
14}import '@legionhandtech/lht-react-widgets/profile-edit-web-component';1<legion-profile-edit
2 api-url="https://your-legion-domain.com"
3 auth-token="your-jwt-token"
4 theme="light"
5 width="600"
6 height="800">
7</legion-profile-edit>The Profile Edit widget uses postMessage to securely deliver the JWT auth token to the iframe after it loads. The token is never included in the URL. Pass the authToken prop and the component handles the rest.