Developer docs / UI components

Settings

Description

Lets the member update their goals, profile and preferences.

UserSettings

Description

A settings screen with a coach picker and sections for the member's plan, goals, dietary preferences, health data, notifications, nutrition targets, personal details (goal weight, height, name, birthdate, gender), contact information and preferences.

The component saves changes itself. It reports success and failure (for example "Goals updated") through the showMessage prop of MiriAppProvider, so pass that to show toasts (see Basic usage).

Basic usage

tsx
{{code.b0}}

Props

All props are optional.

PropTypeDescription
scrollTostringId of a settings row to scroll to and highlight on open, e.g. weightGoal or height.
registerForPushNotifications() => Promise<CareSeeker | null>Turns push notifications on for the member. The push notifications row is shown only when this and unregisterForPushNotifications are both passed.
unregisterForPushNotifications() => Promise<CareSeeker | null>Turns push notifications off for the member.
appearanceModeAppearanceModeThe current appearance: 'system', 'light' or 'dark'. Defaults to 'system'.
onAppearanceChange(mode: AppearanceMode) => voidCalled when the member changes appearance. The appearance row is shown only when you pass this.
onEditMedication() => voidOpens your app's medication screen from a "View" button in the plan section. Without it the medication row is display-only.
← Measurements Next: Webhooks →