useMessage

Hook that manages message visibility with auto-close timer and close callback.

Upgrade now and save 5%.

basic-demo

Usage#

import { useMessage } from '@primereact/headless/message';
 
const { rootProps, closeProps, state } = useMessage({});
 
return (
    <>
        {
            state.visible && (
                <div {...rootProps} role="alert">
                    <p></p>
                    <button {...closeProps}></button>
                </div>
            );
        }
    </>
)

useMessage manages visibility state with optional auto-close timer — see Primitive for a component-based API.

Features#

Returns spread-ready prop objects (rootProps, closeProps)
Auto-close with configurable life duration in milliseconds
handleClose method for programmatic dismissal
onClose callback fired on dismissal

Behavior#

Auto-Close#

Set life to auto-close the message after a delay in milliseconds.

const message = useMessage({ life: 3000 });

Close Callback#

Set onClose to run a callback when the message is dismissed, whether by user action or auto-close.

const message = useMessage({
    life: 5000,
    onClose: () => console.log('Message closed')
});

Programmatic Close#

Use handleClose() to dismiss the message from custom logic.

const message = useMessage({});
// message.handleClose();

Visibility State#

Use state.visible to conditionally render the message. When hidden, rootProps applies display: none.

const message = useMessage({});
// message.state.visible → true/false

Custom Styling with Data Attributes#

Prop objects include data-scope="message" and data-part attributes for CSS targeting.

[data-scope='message'][data-part='root'] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
}
 
[data-scope='message'][data-part='close'] {
    cursor: pointer;
    border: none;
    background: transparent;
}

API#

useMessage#

Name	Type	Default
`life`	`number`	—
Delay in milliseconds to close the message automatically.
`onClose`	`() => void`	—
Callback to invoke when the message is closed.

Accessibility#

See Message Primitive for WAI-ARIA compliance details and keyboard support.