From 0a3f105bb459d23afac719b739a18eca063fd637 Mon Sep 17 00:00:00 2001
From: bnechyporenko <bnechyporenko@bol.com>
Date: Fri, 13 May 2022 09:19:23 +0200
Subject: [PATCH] Updated a doc reflected the changes

Signed-off-by: bnechyporenko <bnechyporenko@bol.com>
---
 docs/plugins/customization.md | 32 +++++++++++++++++++++++---------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/docs/plugins/customization.md b/docs/plugins/customization.md
index 799cff3480..88d7d4bad6 100644
--- a/docs/plugins/customization.md
+++ b/docs/plugins/customization.md
@@ -16,12 +16,24 @@ When you are creating your plugin, you have a possibility to use a metadata fiel
 customizable elements. For example
 
 ```typescript jsx
+export type MyPluginMetadataProps = {
+  createButtonTitle: string;
+};
+
+export const myPluginMetadataRef = createMetadataRef<MyPluginMetadataProps>({
+  id: 'MyPluginMetadataProvider',
+});
+
+export const myPluginMetadata = {
+  MyPluginMetadataProvider: {
+    // or [myPluginMetadataRef.id]
+    createButtonTitle: 'Create Component',
+  },
+};
+
 const plugin = createPlugin({
   id: 'myPlugin',
-  metadata: {
-    mainHeaderText: 'Welcome to my plugin',
-    submitButton: () => <button>Save</button>,
-  },
+  metadata: [myPluginMetadata],
 });
 ```
 
@@ -29,12 +41,12 @@ And the rendering part of the exposed component can retrieve that metadata as:
 
 ```typescript jsx
 export function DefaultMyPluginWelcomePage(props: DefaultMyPluginWelcomeProps) {
-  const { mainHeaderText, submitButton } = this.props.metadata;
+  const { createButtonTitle } =
+    useMetadata<DefaultMyPluginWelcomeProps>(myPluginMetadataRef);
 
   return (
     <div>
-      <h1>{mainHeaderText}</h1>
-      <div>{submitButton}</div>
+      <button>{createButtonTitle}</button>
     </div>
   );
 }
@@ -49,7 +61,9 @@ plugin. Example:
 import { myPlugin } from '@backstage/my-plugin';
 
 myPlugin.reconfigure({
-  mainHeaderText: 'Custom header',
-  submitButton: () => <button>Apply</button>,
+  MyPluginMetadataProvider: {
+    // or [myPluginMetadataRef.id]
+    createButtonTitle: 'Make Component',
+  },
 });
 ```