feat: Add wrapper component to FrameMetadata (#90)

src/components/FrameMetadata.test.tsx

@@ -78,4 +78,17 @@ describe('FrameMetadata', () => {
     ).toBe('10');
     expect(meta.container.querySelectorAll('meta').length).toBe(3);
   });
+
+  it('renders with wrapperComponent', () => {
+    const meta = render(
+      <FrameMetadata
+        image="https://example.com/image.png"
+        wrapperComponent={({ children }) => <div id="wrapper">{children}</div>}
+      />,
+    );
+
+    expect(meta.container.querySelector('#wrapper')).not.toBeNull();
+    expect(meta.container.querySelector('meta[name="fc:frame:image"]')).not.toBeNull();
+    expect(meta.container.querySelectorAll('meta').length).toBe(2);
+  });
 });

src/components/FrameMetadata.tsx

@@ -1,3 +1,4 @@
+import { Fragment } from 'react';
 import type { FrameMetadataType } from '../core/types';
 
 /**
@@ -32,6 +33,7 @@ import type { FrameMetadataType } from '../core/types';
  * @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.
  * @returns {React.ReactElement} The FrameMetadata component.
  */
 export function FrameMetadata({
@@ -40,9 +42,10 @@ export function FrameMetadata({
   input,
   post_url,
   refresh_period,
+  wrapperComponent: WrapperComponent = Fragment,
 }: FrameMetadataType) {
   return (
-    <>
+    <WrapperComponent>
       <meta name="fc:frame" content="vNext" />
       {!!image && <meta name="fc:frame:image" content={image} />}
       {!!input && <meta name="fc:frame:input:text" content={input.text} />}
@@ -63,6 +66,6 @@ export function FrameMetadata({
       {!!refresh_period && (
         <meta name="fc:frame:refresh_period" content={refresh_period.toString()} />
       )}
-    </>
+    </WrapperComponent>
   );
 }

src/core/getFrameMetadata.ts

@@ -1,6 +1,4 @@
-import { FrameMetadataType } from './types';
-
-type FrameMetadataResponse = Record<string, string>;
+import { FrameMetadataResponse, FrameMetadataType } from './types';
 
 /**
  * This function generates the metadata for a Farcaster Frame.

src/core/types.ts

@@ -88,4 +88,12 @@ export type FrameMetadataType = {
   input?: FrameInputMetadata;
   post_url?: string;
   refresh_period?: number;
+  wrapperComponent?: React.ComponentType<any>;
 };
+
+/**
+ * Frame Metadata Response
+ *
+ * Note: exported as public Type
+ */
+export type FrameMetadataResponse = Record<string, string>;