diff --git a/packages/click-to-react-component/package.json b/packages/click-to-react-component/package.json
index 669b64d..6d7e5a0 100644
--- a/packages/click-to-react-component/package.json
+++ b/packages/click-to-react-component/package.json
@@ -1,7 +1,7 @@
{
"type": "module",
"name": "click-to-react-component",
- "version": "1.1.0",
+ "version": "1.1.1",
"description": "Option+Click your React components in your browser to open the source file in VS Code",
"exports": "./src/index.js",
"types": "src/types.d.ts",
diff --git a/packages/click-to-react-component/src/ContextMenu.js b/packages/click-to-react-component/src/ContextMenu.js
index 027bde9..ffb124a 100644
--- a/packages/click-to-react-component/src/ContextMenu.js
+++ b/packages/click-to-react-component/src/ContextMenu.js
@@ -233,6 +233,7 @@ export const ContextMenu = React.forwardRef(
padding: 5px;
border-radius: 4px;
font-size: 13px;
+ max-width: 50vw;
}
[data-click-to-component-contextmenu] button:focus,
@@ -351,7 +352,9 @@ export const ContextMenu = React.forwardRef(
${Object.entries(props).map(
([prop, value]) => html`
${' '}
- ${prop}
+ ${prop}
`
)}
${'>'}
diff --git a/packages/click-to-react-component/src/getDisplayNameFromReactInstance.js b/packages/click-to-react-component/src/getDisplayNameFromReactInstance.js
index 50d8a3c..af64d05 100644
--- a/packages/click-to-react-component/src/getDisplayNameFromReactInstance.js
+++ b/packages/click-to-react-component/src/getDisplayNameFromReactInstance.js
@@ -30,11 +30,16 @@ export function getDisplayNameForInstance(instance) {
case 11: // ForwardRef
return 'React.forwardRef'
- case 15: // MemoComponent
+ case 14: // MemoComponent
+ case 15: // MemoComponent or LazyComponent in react>16
// Attempt to get name from wrapped component
- return elementType.type.name || 'React.memo'
+ return (
+ elementType.type?.name ||
+ Symbol.keyFor?.(elementType.$$typeof) ||
+ 'React.memo'
+ )
- case 16: // LazyComponent
+ case 16: // LazyComponent in react 16
return 'React.lazy'
default: