@@ -66,43 +66,58 @@ const handler = frames(async (ctx) => {
66
66
67
67
` FrameDefinition ` is an object that describes a frame. It has the following properties:
68
68
69
+ ### ` image `
70
+
71
+ - Type: ` React.ReactElement | string `
72
+
73
+ The image to be rendered in the frame. If a string is provided, it must be a valid URL.
74
+
75
+ ### ` imageOptions `
76
+
77
+ - Type: ` { aspectRatio?: "1.91:1" | "1:1" } & ConstructorParameters<typeof ImageResponse>[1] `
78
+
79
+ Options for the image. The ` aspectRatio ` property can be set to ` "1.91:1" ` or ` "1:1" ` .
80
+
81
+ ### ` buttons `
82
+
83
+ - Type: 1, 2, 3, or 4 ` FrameButtonElement ` elements
84
+
85
+ An array of buttons to be rendered in the frame. The buttons are rendered in the order they are provided.
86
+
87
+ #### Example
88
+
69
89
``` tsx
70
- /**
71
- * Frame definition, this is rendered by the frames
72
- */
73
- export type FrameDefinition = {
74
- /**
75
- * If string then it must be a valid URL
76
- */
77
- image: React .ReactElement | string ;
78
- imageOptions? : {
79
- /**
80
- * @default ' 1.91:1'
81
- */
82
- aspectRatio? : " 1.91:1" | " 1:1" ;
83
- } & ConstructorParameters <typeof ImageResponse >[1 ];
84
- buttons? :
85
- | []
86
- | [FrameButtonElement ]
87
- | [FrameButtonElement , FrameButtonElement ]
88
- | [FrameButtonElement , FrameButtonElement , FrameButtonElement ]
89
- | [
90
- FrameButtonElement ,
91
- FrameButtonElement ,
92
- FrameButtonElement ,
93
- FrameButtonElement ,
94
- ];
95
- /**
96
- * Label for text input, if no value is provided the input is not rendered
97
- */
98
- textInput? : string ;
99
- /**
100
- * Global app state that will be available on next frame
101
- */
102
- state? : JsonValue ;
103
- } & ResponseInit ;
90
+ import { Button } from " frames.js/next" ;
91
+
92
+ const handleRequest = frames (async (ctx ) => {
93
+ return {
94
+ image: <span >Test</span >,
95
+ buttons: [
96
+ <Button action = " post" >Post</Button >,
97
+ <Button action = " post_redirect" >Post Redirect</Button >,
98
+ ],
99
+ };
100
+ });
104
101
```
105
102
103
+ ### ` textInput `
104
+
105
+ - Type: ` string `
106
+
107
+ Label for text input. If no value is provided, the input is not rendered.
108
+
109
+ ### ` state `
110
+
111
+ - Type: ` JsonValue `
112
+
113
+ Global app state that will be available on the next frame.
114
+
115
+ ### ` headers `
116
+
117
+ - Type: ` HeadersInit `
118
+
119
+ Custom headers to be included in the response.
120
+
106
121
The ` ResponseInit ` properties allow you to specify custom headers such as ` Cache-Control ` .
107
122
108
123
### Cache-Control
0 commit comments