# usePostMessage

*Category:* Utilities
*Section:* Browser & device hooks
*Source:* https://uikit.developers.rio.cloud/#/utilities/usePostMessage
*Captured:* 2026-04-27T14:59:41.796Z

The usePostMessage hook allows to easily exchange events and data between the parent window and embedded iframes.

## usePostMessage

Deprecated hookThis hook is deprecated and no longer maintained. Please switch to the dedicated sender usePostMessageSender and receiver useIncomingPostMessages hooks instead.

### Example: Example 1

Parent window
Send message to widget iframe
Message from widget: -

#### React (tsx)

```tsx
import { useState } from 'react';
import IframeResizer from 'iframe-resizer-react';

import Button from '@rio-cloud/rio-uikit/Button';
import usePostMessage, { type RemoteAction } from '@rio-cloud/rio-uikit/usePostMessage';

const PREFIX = 'EVENT';
const EVENT_TYPE = `${PREFIX}_POST_MESSAGE_EXAMPLE`;

export default () => {
    const [messageFromWidget, setMessageFromWidget] = useState('-');

    const { sendMessageToWidget } = usePostMessage(PREFIX, (remoteAction: RemoteAction) => {
        if (remoteAction.type === EVENT_TYPE) {
            setMessageFromWidget(remoteAction.payload);
        }
    });

    const handleSentToWidget = () => {
        sendMessageToWidget(
            {
                type: EVENT_TYPE,
                payload: 'Hello from the parent',
            },
            document.getElementById('postMessageExample') as HTMLIFrameElement
        );
    };

    return (
        <div className='display-flex gap-25'>
            <div className='border rounded padding-20 height-200'>
                <div className='text-medium'>Parent window</div>
                <div className='btn-toolbar margin-top-20'>
                    <Button onClick={handleSentToWidget}>Send message to widget iframe</Button>
                </div>
                <div className='margin-top-20'>
                    <label>Message from widget:</label>
                    <div>{messageFromWidget}</div>
                </div>
            </div>
            <div className='iframe-wrapper'>
                <IframeResizer
                    id='postMessageExample'
                    src='/#postMessageExample'
                    className='unstyled width-100pct'
                    style={{ width: '1px', minWidth: '100%' }}
                />
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="display-flex gap-25">
    <div class="border rounded padding-20 height-200">
        <div class="text-medium">Parent window</div>
        <div class="btn-toolbar margin-top-20">
            <button type="button" class="btn btn-default btn-component" tabindex="0">Send message to widget iframe</button>
        </div>
        <div class="margin-top-20">
            <label>Message from widget:</label>
            <div>-</div>
        </div>
    </div>
    <div class="iframe-wrapper">
        <iframe title="iframe" id="postMessageExample" src="/#postMessageExample" class="unstyled width-100pct" style="width: 1px; min-width: 100%; overflow: hidden; height: 200px;" scrolling="no">
        </iframe>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| messagePrefix | string | — | A custom prefix to limit the event listener for these events. |
| onReceiveMessage | (eventData: any) => void | — | A callback function triggered when a message is received. |

#### Props: Returns

### Returns

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| sendMessageToParent | (message: RemoteAction) => void | — | Function to send an event with payload to the parent window. |
| sendMessageToWidget | (message: RemoteAction, targetFrames: HTMLIFrameElement[]) | — | Function to send an event with payload to a list of iframes. |