Extensions

Press shift + S to search API reference.

React hook

useSettingsButton

View source

A hook for using the settings button that lives outside the extension's viewport. It will show the settings button (hidden by default) and call the provided callback whenever the settings button is clicked. It will also re-render your component when the settings button is clicked.

import {useSettingsButton} from '@airtable/blocks/ui';
import {useState} from 'react';
function ComponentWithSettings() {
const [isShowingSettings, setIsShowingSettings] = useState(false);
useSettingsButton(function() {
setIsShowingSettings(!isShowingSettings);
});
if (isShowingSettings) {
return <SettingsComponent />
}
return <MainComponent />
}

Function signature

function (onClickCallback: FlowAnyFunction) => void
onClickCallback

A callback to call when the button is clicked.