feat: polished wrapper prop for <FrameMetadata /> component (#91)

.changeset/honest-tigers-thank.md

@@ -0,0 +1,6 @@
+---
+'@coinbase/onchainkit': patch
+---
+
+- **feat**: added `wrapper` prop to `<FrameMetadata />` component, that defaults to `React.Fragment` when not passed (original behavior). By @syntag #90 #91
+- **feat**: exported `FrameMetadataResponse` type which can be useful when using `getFrameMetadata` in a TS project. By @syntag #90

src/components/FrameMetadata.test.tsx

@@ -79,11 +79,11 @@ describe('FrameMetadata', () => {
     expect(meta.container.querySelectorAll('meta').length).toBe(3);
   });
 
-  it('renders with wrapperComponent', () => {
+  it('renders with wrapper', () => {
     const meta = render(
       <FrameMetadata
         image="https://example.com/image.png"
-        wrapperComponent={({ children }) => <div id="wrapper">{children}</div>}
+        wrapper={({ children }) => <div id="wrapper">{children}</div>}
       />,
     );
 

src/components/FrameMetadata.tsx

@@ -1,6 +1,10 @@
 import { Fragment } from 'react';
 import type { FrameMetadataType } from '../core/types';
 
+type FrameMetadataReact = FrameMetadataType & {
+  wrapper?: React.ComponentType<any>;
+};
+
 /**
  * FrameMetadata component
  *
@@ -27,13 +31,13 @@ import type { FrameMetadataType } from '../core/types';
  * />
  * ```
  *
- * @param {FrameMetadataType} props - The metadata for the frame.
+ * @param {FrameMetadataReact} props - The metadata for the frame.
  * @param {string} props.image - The image URL.
  * @param {string} props.input - The input text.
  * @param {string} props.post_url - The post URL.
  * @param {number} props.refresh_period - The refresh period.
  * @param {Array<{ label: string, action?: string }>} props.buttons - The buttons.
- * @param {React.ComponentType<any> | undefined} props.wrapperComponent - The wrapper component meta tags are rendered in.
+ * @param {React.ComponentType<any> | undefined} props.wrapper - The wrapper component meta tags are rendered in.
  * @returns {React.ReactElement} The FrameMetadata component.
  */
 export function FrameMetadata({
@@ -42,10 +46,10 @@ export function FrameMetadata({
   input,
   post_url,
   refresh_period,
-  wrapperComponent: WrapperComponent = Fragment,
-}: FrameMetadataType) {
+  wrapper: Wrapper = Fragment,
+}: FrameMetadataReact) {
   return (
-    <WrapperComponent>
+    <Wrapper>
       <meta name="fc:frame" content="vNext" />
       {!!image && <meta name="fc:frame:image" content={image} />}
       {!!input && <meta name="fc:frame:input:text" content={input.text} />}
@@ -66,6 +70,6 @@ export function FrameMetadata({
       {!!refresh_period && (
         <meta name="fc:frame:refresh_period" content={refresh_period.toString()} />
       )}
-    </WrapperComponent>
+    </Wrapper>
   );
 }

src/core/types.ts

@@ -88,7 +88,6 @@ export type FrameMetadataType = {
   input?: FrameInputMetadata;
   post_url?: string;
   refresh_period?: number;
-  wrapperComponent?: React.ComponentType<any>;
 };
 
 /**

src/version.ts

@@ -1 +1 @@
-export const version = '0.5.0';
+export const version = '0.5.1';