Extensions

Press shift + S to search API reference.

Model

SettingsButton

View source

Interface to the settings button that lives outside the extension's viewport.

The useSettingsButton hook is the recommended way to use the settings button, but you can also use it with useWatchable if you want more granular control (for example, to only show the button conditionally).

import {settingsButton} from '@airtable/blocks';
import {useWatchable} from '@airtable/blocks/ui';
function AppWithSettings({shouldShowSettingsButton}) {
useEffect(() => {
// A count of calls to `show()` and `hide()` is maintained internally. The button will
// stay visible if there are more calls to `show()` than `hide()` - so here, we check
// `isVisible` so we only we only call them when necessary.
// The button is not visible by default.
if (shouldShowSettingsButton && !settingsButton.isVisible) {
settingsButton.show();
} else if (!shouldShowSettingsButton && settingsButton.isVisible) {
settingsButton.hide();
}
});
useWatchable(settingsButton, 'click', function() {
alert('Clicked!');
});
}

Members

class SettingsButton extends Watchable<WatchableSettingsButtonKey>
readonly isVisibleboolean

Whether the settings button is being shown. Can be watched.

hide
function () => void

Hide the settings button.

Note: A count of calls to show() and hide() is maintained internally. The button will stay visible if there are more calls to show() than hide().

show
function () => void

Show the settings button.

unwatch
function (keys: WatchableSettingsButtonKey | ReadonlyArray<WatchableSettingsButtonKey>, callback: function (model: this, key: WatchableSettingsButtonKey, args: ...Array<any>) => unknown, context?: FlowAnyObject | null) => Array<WatchableSettingsButtonKey>
keys

the keys to unwatch

callback

the function passed to .watch for these keys

context

the context that was passed to .watch for this callback

Unwatch keys watched with .watch.

Should be called with the same arguments given to .watch.

Returns the array of keys that were unwatched.

watch
function (keys: WatchableSettingsButtonKey | ReadonlyArray<WatchableSettingsButtonKey>, callback: function (model: this, key: WatchableSettingsButtonKey, args: ...Array<any>) => unknown, context?: FlowAnyObject | null) => Array<WatchableSettingsButtonKey>
keys

the keys to watch

callback

a function to call when those keys change

context

an optional context for this in callback.

Get notified of changes to the model.

Every call to .watch should have a matching call to .unwatch.

Returns the array of keys that were watched.