`@poap-xyz/frames`

@poap-xyz/frames is a package to ease the use of Farcaster Frames (opens in a new tab).

Features

Get the list of meta tags to add to an HTML page head
Build and render the HTML page representing the frame

Installation

NPM

npm install @poap-xyz/frames

Yarn

yarn add @poap-xyz/frames

Usage

Get the list of meta tags

// pages/index.tsx
import { NextSeo } from 'next-seo';
import { Frame, FrameAspectRatio } from '@poap-xyz/frames';
 
export default function Component() {
  const frame = new Frame({
    title: 'Hello Frames!',
    image: '<image_url>',
    aspectRatio: FrameAspectRatio.SQUARE,
  });
 
  return (
    <>
      <NextSeo
        title="Hello Frames!"
        description="page description"
        openGraph={{ images: [{ url: '<image_url>' }] }}
        additionalMetaTags={frame.toMetaTags()}
      />
      <div>page content...</div>
    </>
  )
}

Build and render the HTML page representing the frame

// pages/api/frame.ts
import { NextApiRequest, NextApiResponse } from 'next';
import { Frame, FrameAspectRatio } from '@poap-xyz/frames';
 
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const frame = new Frame({
    title: 'Hello Frames!',
    image: '<image_url>',
    aspectRatio: FrameAspectRatio.SQUARE,
  });
  return res.status(200).send(frame.render());
}

Documentation

For more detailed documentation on POAP topics, please visit this link (opens in a new tab).

Examples

For example scripts and usage, please check the examples (opens in a new tab).

Contributing

We welcome contributions! Please see the CONTRIBUTING.md file for guidelines.

License

@poap-xyz/frames is released under the MIT License (opens in a new tab).

Compass Render