Skip to main content

Use an exposed component

App plugins can expose additional functionality through a React component, which you can then import into your own plugin. Use exposed components to augment your own app plugin with additional features to extend a user workflow.

Use an exposed component​

The following example shows how you can render a component exposed by another plugin in your extension point:

  1. Use the exposed component in your code:
src/components/MyComponent.tsx
import { usePluginComponent } from '@grafana/runtime';

export const MyComponent = () => {
const { component: Component, isLoading } = usePluginComponent('myorg-basic-app/reusable-component/v1');

return (
<>
<div>My component</div>
{isLoading ? 'Loading...' : <Component name="John" />}
</>
);
};
  1. Declare the component dependency in your plugin.json:
src/plugin.json
{
...
"dependencies": {
"extensions": {
"exposedComponents": ["myorg-basic-app/reusable-component/v1"]
}
}
}
tip

Prerequisites​

The plugin that exposes the component must also have declared it in their plugin.json file under the extensions.exposedComponents section. For more information about exposing components, see Expose a component.