Skip to main content

Expose a component

Expose components to allow app plugins to easily share functionality with other app plugins. Compared to registering an extension, they do not require the extension provider to explicitly register a component against any extension points, and can therefore be used by any app plugin with no action required by the provider.

Best practices​

  • Wrap your component with providers - if you want to access any plugin-specific state in your component, make sure to wrap it with the necessary React context providers (for example, a wrapping for Redux).

Expose a component from an app plugin​

You can expose one or multiple components from within the same app plugin. For example:

import pluginJson from './plugin.json';

export const plugin = new AppPlugin()
// You can also expose multiple components from the same app plugin
.exposeComponent({
// Important!
// The `id` should always be prefixed with your plugin id, otherwise it won't be exposed.
id: `${pluginJson.id}/reusable-component/v1`,
title: 'Reusable component',
description: 'A component that can be reused by other app plugins.',
component: ({ name }: { name: string }) => <div>Hello {name}!</div>,
});

Access plugin meta information in an exposed component​

You can access metadata for the extended component. For example:

import { usePluginContext } from "@grafana/runtime";
import pluginJson from './plugin.json';

export const plugin = new AppPlugin()
.exposeComponent({
id: `${pluginJson.id}/reusable-component/v1`,
title: 'Reusable component',
description: 'A component that can be reused by other app plugins.',
component: ({ name }: { name: string }) => {
// This is the meta information of the app plugin that is exposing the component
const { meta } = usePluginContext();

return (
<div>Hello {name}!</div>
<div>Version {meta.info.version}</div>
);
}
})