Extensions

Press shift + S to search API reference.

Function

registerRecordActionDataCallback

View source

Registers a callback to handle "open block" / "perform record action" events (from button field).

Returns a unsubscribe function that should be used to unregister the callback for cleanup on component unmount, or if you wish to register a different function.

Also see useRecordActionData, which subscribes to the same events in a synchronous way.

Your block will not receive "perform record action" events until a callback is registered - they're held until registration to ensure the block is ready to handle the event (e.g. has finished loading).

Because of this, we recommend only registering a callback once, in your top level component - otherwise, messages could be received while not all callbacks have been successfully registered. Similarly, using both registerRecordActionDataCallback and useRecordActionData is not supported.

You can test your block in development by sending "perform record action" events to your block in the "Advanced" panel of the block developer tools.

After releasing your block, you can use it with a button field by choosing the "Open custom block" action and selecting your block.

import React, {useEffect, useState} from 'react';
import {registerRecordActionDataCallback} from '@airtable/blocks/ui';
function LatestRecordAction() {
const [recordActionData, setRecordActionData] = useState(null);
const callback = (data) => {
console.log('Record action received', data);
setRecordActionData(data);
}
useEffect(() => {
// Return the unsubscribe function so it's run on cleanup.
return registerRecordActionDataCallback(callback);
}, [callback]);
if (recordActionData === null) {
return <span>No events yet</span>;
}
return (
<ul>
<li>Record id: {recordActionData.recordId}</li>
<li>View id: {recordActionData.viewId}</li>
<li>Table id: {recordActionData.tableId}</li>
</ul>
);
}

Function signature