Skip to content

useFrame

Props

dangerousSkipSigning

  • Type: boolean

If true, the frame will not be signed before being sent to the frameActionProxy. This is useful for frames that don't verify signatures.

frameActionProxy

  • Type: string

The route used to POST frame actions. The post_url will be added as a the url query parameter.

frameGetProxy

  • Type: string

The route used to GET the initial frame via proxy.

signerState

  • Type: SignerStateInstance<T, B>

An signer state object used to determine what actions are possible.

homeframeUrl

  • Type: string | null

The url of the homeframe, if null won't load a frame.

frame

  • Type: Frame

The initial frame. if not specified will fetch it from the url prop.

onMint

  • Type: (t: onMintArgs) => void

A function to handle mint buttons.

onTransaction

  • Type: OnTransactionFunc

A function to handle transaction button presses, returns the transaction hash or null.

frameContext

  • Type: FrameContext

The context of this frame, used for generating Frame Action payloads.

extraButtonRequestPayload

  • Type: Record<string, unknown>

Extra data appended to the frame action payload.

Returns

  • Type: FrameState

fetchFrame

  • Type: (request: FrameRequest) => void

Fetches a frame from the frameGetProxy.

clearFrameStack

  • Type: () => void

Clears the frame stack.

frame

  • Type: Frame | null

The frame at the top of the stack (at index 0).

framesStack

  • Type: FramesStack

A stack of frames with additional context, with the most recent frame at index 0.

isLoading

  • Type: null | FrameStackPending

Whether the frame is loading.

inputText

  • Type: string

The input text.

setInputText

  • Type: (s: string) => void

Sets the input text.

onButtonPress

  • Type: (frameButton: FrameButton, index: number) => void

Handles a button press.

isFrameValid

  • Type: boolean | undefined

Whether the frame at the top of the stack has any frame validation errors. Undefined when the frame is not loaded or set.

frameValidationErrors

  • Type: Record<string, string[]> | undefined | null

The frame validation errors.

error

  • Type: null | unknown

Whether there was an error loading the frame.

homeframeUrl

  • Type: string | null

The url of the frame.

Usage

frames.js/render/types.tsx
"use client";
import { FrameUI, fallbackFrameContext, FrameContext } from "@frames.js/render";
import { FrameImageNext } from "@frames.js/render/next";
import { FrameButton } from "frames.js";
import { useFrame } from "@frames.js/render/use-frame";
import {
  mockFarcasterSigner,
  createFrameActionMessageWithSignerKey,
} from "@frames.js/render/farcaster";
 
export default function Page() {
  const frameState = useFrame({
    // replace with your frame url
    homeframeUrl:
      "https://fc-polls.vercel.app/polls/73c6efda-bae7-4d46-8f36-3bb3b8377448",
    // corresponds to the name of the route for POST in step 3
    frameActionProxy: "/frames",
    // corresponds to the name of the route for GET in step 3
    frameGetProxy: "/frames",
    frameContext: fallbackFrameContext,
    // map to your identity if you have one
    signerState: {
      // TODO: replace with your signer
      signer: mockFarcasterSigner,
      hasSigner: true,
      onSignerlessFramePress: () => {
        // Implement me
        alert("A frame button was pressed without a signer.");
      },
      signFrameAction: () => {
        alert("implement me.");
      },
    },
  });
 
  return (
    <FrameUI frameState={frameState} theme={{}} FrameImage={FrameImageNext} />
  );
}

Full example