FeedbackDmduskmoonimplemented6 demos

DmMessage

DmMessage shows transient success, error, warning, info, and loading feedback.

Import@duskmoon-dev/components/dm-message

6API sections

12documented props

4behavior scenarios

Key API

contenterrorsuccesswarninginfoloading

Usage

When to use

Use it in DuskMoon application screens that need a packaged, opinionated workflow component.
Reach for the lower-level standard component when the screen needs custom composition.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

DuskMoon workflow wrapper

Wraps lower-level primitives into a higher-level DuskMoon-prefixed workflow API.

Application defaults

Examples show the defaults and composition points expected by internal DuskMoon app screens.

Primary API surface

DmMessage is most often configured through `content`, `error`, `success`, `warning`.

Covered behavior

Renders decoded multiline message content

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Basic usage

authored

Import the component stylesheet and DmMessage from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { DmMessage } from "@duskmoon-dev/components/dm-message";

export function Example() {
  return (<DmMessage>DuskMoon Dm Message</DmMessage>);
}

Preview

Renders decoded multiline message content

test-backed

DmMessage scenario from the component test coverage: renders decoded multiline message content.

Source

import "@duskmoon-dev/components/styles.css";
import { DmMessage } from "@duskmoon-dev/components/dm-message";

export function DmMessageRendersDecodedMultilineMessageDemo() {
  return (<DmMessage>DuskMoon Dm Message</DmMessage>);
}

Preview

Opens typed messages with Dm API and keyed replacement

test-backed

DmMessage scenario from the component test coverage: opens typed messages with dm api and keyed replacement.

Source

import "@duskmoon-dev/components/styles.css";
import { DmMessage } from "@duskmoon-dev/components/dm-message";

export function DmMessageOpensTypedMessagesWithDemo() {
  return (<DmMessage>DuskMoon Dm Message</DmMessage>);
}

Preview

Opens default info messages and destroys by key

test-backed

DmMessage scenario from the component test coverage: opens default info messages and destroys by key.

Source

import "@duskmoon-dev/components/styles.css";
import { DmMessage } from "@duskmoon-dev/components/dm-message";

export function DmMessageOpensDefaultInfoMessagesDemo() {
  return (<DmMessage>DuskMoon Dm Message</DmMessage>);
}

Preview

Limits visible messages to three

test-backed

DmMessage scenario from the component test coverage: limits visible messages to three.

Source

import "@duskmoon-dev/components/styles.css";
import { DmMessage } from "@duskmoon-dev/components/dm-message";

export function DmMessageLimitsVisibleMessagesToDemo() {
  return (<DmMessage>DuskMoon Dm Message</DmMessage>);
}

Preview

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <DmMessage>DuskMoon Dm Message</DmMessage>
</div>

<div data-theme="moonlight">
  <DmMessage>DuskMoon Dm Message</DmMessage>
</div>

API

The API reference below lists every parsed exported type or interface for DmMessage. Start with `content`, `error`, `success`, `warning` for common usage.

Types: packages/components/src/components/dm-message/DmMessage.types.tsScenarios: packages/components/src/components/dm-message/DmMessage.test.tsx

DmMessageContentPropsinterface

Prop	Type	Required	Description
`content`	`string`	Yes	content configures DmMessage.
`className`	`string`	No	className configures DmMessage.

DmMessageApiinterface

Prop	Type	Required	Description
`error`	`(content: string, key?: string) => MessageHandle`	Yes	error configures DmMessage.
`success`	`(content: string, key?: string) => MessageHandle`	Yes	success configures DmMessage.
`warning`	`(content: string, key?: string) => MessageHandle`	Yes	warning configures DmMessage.
`info`	`(content: string, key?: string) => MessageHandle`	Yes	info configures DmMessage.
`loading`	`(content: string, key?: string) => MessageHandle`	Yes	loading configures DmMessage.
`open`	`(content: string, key?: string, type?: DmMessageType) => MessageHandle`	Yes	open configures DmMessage.
`destroy`	`(key?: string) => void`	Yes	destroy configures DmMessage.

DmMessageHolderPropsinterface

Prop	Type	Required	Description
`className`	`string`	No	className configures DmMessage.

DmMessageOpenConfiginterface extends Omit< MessageArgsProps, "content" | "type" >

Prop	Type	Required	Description
`content`	`string`	Yes	content configures DmMessage.
`type`	`DmMessageType`	No	type configures DmMessage.

DmMessageTypetype

MessageType

DmMessageContentNodetype

ReactNode