diff --git a/README.md b/README.md index 3947cee..e498649 100644 --- a/README.md +++ b/README.md @@ -1584,17 +1584,19 @@ export function ContextMenuViewExample10(props) { ### `ContextMenuView` Example 11 -**Summary**: TBA +**Summary**: An example showing how to use a custom preview for the context menu.
-| Notes | -| ------------------------ | -| TBA

📝 **Note A**: | +| Notes | +| ------------------------------------------------------------ | +| 1️⃣ — The `ContextMenuView.renderPreview` render prop allows you show a custom preview when the context menu appears.

📝 **Note**: The `renderPreview` prop accepts a function that returns an element. The returned element will be used for the context menu preview. | +| 2️⃣ — The `ContextMenuView.previewConfig` is used to control the behaviours and appearance of the custom context menu preview.

In order to show the custom context menu preview, we must first set `MenuPreviewConfig.previewType` to `'CUSTOM'`. Bu default, this property is set to `'DEFAULT'`, which means that you do not want to use a custom preview.

📝 **Note A**: The `previewConfig` prop accepts a `MenuPreviewConfig` object.

📝 **Note B**: The `previewType` property accepts a `MenuPreviewType` string. You can set this to `'DEFAULT'` if you want to quickly disable the custom preview. | +| 3️⃣ — In this example, we want the custom preview to be as big as possible, so we set the `MenuPreviewConfig.previewSize` property to `'STRETCH'`.

📝 **Note**: The `previewSize` property accepts a `MenuPreviewSize` string. By default, this prop is set to `'INHERIT'`, which means to just match the size of the root view returned from `renderPreview`. |
-[🔗 Full Example](example/src/examples/ContextMenuViewExampleXX.tsx) +[🔗 Full Example](example/src/examples/ContextMenuViewExample11.tsx) ```jsx // 📝 Note: for the sake of brevity, some of the code is omitted...