diff --git a/docs/plugins/customization.md b/docs/plugins/customization.md index e9a92d1021..0477ba18a7 100644 --- a/docs/plugins/customization.md +++ b/docs/plugins/customization.md @@ -18,11 +18,12 @@ customizable elements. For example ```typescript jsx const plugin = createPlugin({ id: 'my-plugin', - configure(options?: PluginInputOptions): PluginOptions { - const defaultOptions = { createButtonTitle: 'Create' }; - if (!options) { - return defaultOptions; - } + __experimentalConfigure( + options?: CatalogInputPluginOptions, + ): CatalogPluginOptions { + const defaultOptions = { + createButtonTitle: 'Create', + }; return { ...defaultOptions, ...options }; }, }); @@ -31,12 +32,19 @@ const plugin = createPlugin({ And the rendering part of the exposed component can retrieve that metadata as: ```typescript jsx -export type CatalogPageOptionsProps = { +export type CatalogPluginOptions = { createButtonTitle: string; }; +export type CatalogInputPluginOptions = { + createButtonTitle: string; +}; + +export const useCatalogPluginOptions = () => + usePluginOptions(); + export function DefaultMyPluginWelcomePage() { - const { createButtonTitle } = usePluginOptions(); + const { createButtonTitle } = useCatalogPluginOptions(); return (
@@ -54,7 +62,7 @@ plugin. Example: ```typescript jsx import { myPlugin } from '@backstage/my-plugin'; -myPlugin.reconfigure({ - createButtonTitle: 'Maybe Create', +myPlugin.__experimentalReconfigure({ + createButtonTitle: 'New', }); ```