UI extensions API guide (deprecated elements)

warning

These elements are deprecated and have been removed starting in Grafana v12.

getPluginExtensions

warning

This function has been removed starting in Grafana version 12. Use either the usePluginLinks() or usePluginComponents() hooks instead.

This function fetches extensions (both links and components) that are registered to a certain extension point.

import { getPluginExtensions } from '@grafana/runtime';

const { extensions } = getPluginExtensions({
  extensionPointId: 'grafana/dashboard/panel/menu/v1',
  limitPerPlugin: 2,
  context: {
    panelId: '...',
  },
});

Parameters

The getPluginExtensions() function takes a single options object with the following properties:

Property	Description	Required
extensionPointId	A unique id to fetch link extensions for. In case you are implementing a new extension point, this is what plugins reference when registering extensions. Plugins must prefix this with their plugin id, while core Grafana extensions points have to use a "grafana/" prefix. Example: "grafana/dashboard/panel/menu/v1"	true
context?	An arbitrary object that you would like to share with the extensions. This can be used to pass data to the extensions.	false
limitPerPlugin?	- The maximum number of extensions to return per plugin. Default is no limit.	false

Return value

The hook returns the following object:

const {
  // An empty array if no plugins have registered extensions for this extension point yet
  extensions: PluginExtension[];
} = getPluginExtensions(options);

For more information, see PluginExtension.

usePluginExtensions

warning

This hook has been removed starting in Grafana version 12. Use either the usePluginLinks() or usePluginComponents() hooks instead.

This react hook fetches extensions (both links and components) that are registered to a certain extension point.

import { usePluginExtensions } from '@grafana/runtime';

const { extensions, isLoading } = usePluginExtensions({
  extensionPointId: 'grafana/dashboard/panel/menu/v1',
  limitPerPlugin: 2,
  context: {
    panelId: '...',
  },
});

Parameters

The .usePluginExtensions() method takes a single options object with the following properties:

Property	Description	Required
extensionPointId	A unique id to fetch link extensions for. In case you are implementing a new extension point, this is what plugins reference when registering extensions. Plugins must prefix this with their plugin id, while core Grafana extensions points have to use a "grafana/" prefix. Example: "grafana/dashboard/panel/menu/v1"	true
context?	An arbitrary object that you would like to share with the extensions. This can be used to pass data to the extensions.	false
limitPerPlugin?	The maximum number of extensions to return per plugin. Default is no limit.	false

Return value

The hook returns the following object:

const {
  // An empty array if no plugins have registered extensions for this extension point yet
  extensions: PluginExtension[];

  // `true` until any plugins extending this extension point
  // are still loading
  isLoading: boolean;
} = usePluginExtensions(options);

For more information, see PluginExtension.