diff --git a/.changeset/honest-tigers-thank.md b/.changeset/honest-tigers-thank.md new file mode 100644 index 0000000000..617e4bda34 --- /dev/null +++ b/.changeset/honest-tigers-thank.md @@ -0,0 +1,6 @@ +--- +'@coinbase/onchainkit': patch +--- + +- **feat**: added `wrapper` prop to `` 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 diff --git a/src/components/FrameMetadata.test.tsx b/src/components/FrameMetadata.test.tsx index 01e095755b..ba472cc746 100644 --- a/src/components/FrameMetadata.test.tsx +++ b/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(
{children}
} + wrapper={({ children }) =>
{children}
} />, ); diff --git a/src/components/FrameMetadata.tsx b/src/components/FrameMetadata.tsx index a6e2e2fff2..e8aba24fbc 100644 --- a/src/components/FrameMetadata.tsx +++ b/src/components/FrameMetadata.tsx @@ -1,6 +1,10 @@ import { Fragment } from 'react'; import type { FrameMetadataType } from '../core/types'; +type FrameMetadataReact = FrameMetadataType & { + wrapper?: React.ComponentType; +}; + /** * 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 | undefined} props.wrapperComponent - The wrapper component meta tags are rendered in. + * @param {React.ComponentType | 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 ( - + {!!image && } {!!input && } @@ -66,6 +70,6 @@ export function FrameMetadata({ {!!refresh_period && ( )} - + ); } diff --git a/src/core/types.ts b/src/core/types.ts index caa5176c85..3b5dbf6cbf 100644 --- a/src/core/types.ts +++ b/src/core/types.ts @@ -88,7 +88,6 @@ export type FrameMetadataType = { input?: FrameInputMetadata; post_url?: string; refresh_period?: number; - wrapperComponent?: React.ComponentType; }; /** diff --git a/src/version.ts b/src/version.ts index 2af12a2cc9..922904388b 100644 --- a/src/version.ts +++ b/src/version.ts @@ -1 +1 @@ -export const version = '0.5.0'; +export const version = '0.5.1';