Skip to content

Commit 2981297

Browse files
committed
fix: FrameDefinition types
1 parent 23668a6 commit 2981297

File tree

1 file changed

+49
-34
lines changed

1 file changed

+49
-34
lines changed

docs/pages/reference/core/createFrames.mdx

+49-34
Original file line numberDiff line numberDiff line change
@@ -66,43 +66,58 @@ const handler = frames(async (ctx) => {
6666

6767
`FrameDefinition` is an object that describes a frame. It has the following properties:
6868

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+
6989
```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+
});
104101
```
105102

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+
106121
The `ResponseInit` properties allow you to specify custom headers such as `Cache-Control`.
107122

108123
### Cache-Control

0 commit comments

Comments
 (0)