Frog.frame

Import

import { Frog } from 'frog'

Usage

import { Button, Frog } from 'frog'
 
const app = new Frog({ title: 'Frog Frame' })
 
app.frame('/', (c) => {
  return c.res({
    image: (
      <div style={{ color: 'white', display: 'flex', fontSize: 60 }}>
        Select your fruit!
      </div>
    ),
    intents: [
      <Button value="apple">Apple</Button>,
      <Button value="banana">Banana</Button>,
      <Button value="mango">Mango</Button>
    ]
  })
})

Parameters

path

Type: string

Path of the route.

import { Button, Frog } from 'frog'
 
const app = new Frog({ title: 'Frog Frame' })
 
app.frame(
  '/foo/bar',
  (c) => {
    return c.res({ 
      image: ( 
        <div style={{ color: 'white', display: 'flex', fontSize: 60 }}> 
          Select your fruit! 
        </div> 
      ), 
      intents: [ 
        <Button value="apple">Apple</Button>, 
        <Button value="banana">Banana</Button>, 
        <Button value="mango">Mango</Button> 
      ] 
    })
  }
)

handler

Type: (c: Context) => FrameResponse

Handler function for the route.

import { Button, Frog } from 'frog'
 
const app = new Frog({ title: 'Frog Frame' })
 
app.frame(
  '/foo/bar',
  (c) => {
    return c.res({
      image: (
        <div style={{ color: 'white', display: 'flex', fontSize: 60 }}>
          Select your fruit!
        </div>
      ),
      intents: [
        <Button value="apple">Apple</Button>,
        <Button value="banana">Banana</Button>,
        <Button value="mango">Mango</Button>
      ]
    })
  }
)

Context Parameter

See the Context API.

Frame Response

See the Frame Response API.