useFlag
useFlag manages a global list of toast notifications (Flag). It uses a module-level reactive store so any component can add or remove flags without prop drilling.
Setup: Add
<FlagGroup />once in your app root — it teleports to<body>and renders the flags. See Flag Group.
Signature
ts
function useFlag(): {
flags: Ref<FlagItem[]>
addFlag(options: FlagOptions): string
removeFlag(id: string): void
}Basic usage
ts
import { useFlag } from '@jetpack-labs/jetpack-ui'
const { addFlag } = useFlag()
// Success
addFlag({ title: 'Changes saved', appearance: 'success' })
// With description and custom duration
addFlag({
title: 'Upload complete',
description: '3 files were uploaded successfully.',
appearance: 'success',
duration: 6000,
})
// Sticky (no auto-dismiss)
addFlag({ title: 'Background job running…', autoDismiss: false })FlagOptions
| Property | Type | Default | Description |
|---|---|---|---|
id | string | auto-generated | Unique identifier — omit to let useFlag generate one |
title | string | — | Required. Primary message text |
description | string | — | Optional secondary text |
appearance | 'info' | 'success' | 'warning' | 'error' | 'info' | Color and icon style |
autoDismiss | boolean | true | Automatically dismiss after duration ms |
duration | number | 4000 | Auto-dismiss delay in milliseconds |
Return value
| Member | Type | Description |
|---|---|---|
flags | Ref<FlagItem[]> | Reactive list of active flags |
addFlag(options) | (options: FlagOptions) => string | Add a flag; returns its id |
removeFlag(id) | (id: string) => void | Remove a flag by id |