UserBanner

A component that displays a user's profile picture and display name.

Installation

npm

npx maiton add userBanner

Usage

To get the user data, you have to use the farcasterHubContext in the middleware.

import { UserBanner } from "../../../../components/UserBanner";

import { getUserDataForFid, UserDataReturnType } from "frames.js";
 
const user: UserDataReturnType = await getUserDataForFid({
  fid: ctx.message?.requesterFid,
});
 
...
 
<UserBanner
  user={{
    displayName: user.displayName,
    pfp: user?.profileImage,
  }}
/>

Props

The UserBanner component extends div, so you can pass all standard div props.

`user`

Description	The user object containing display name and profile picture
Type	`User: {displayName: string, pfp: string}`

`position`

Description	The position of the user banner on the screen
Type	`topRight \| bottomRight \| topLeft \| bottomLeft \| undefined`
Default	`topLeft`

`size`

Description	The size of the user banner text
Type	`sm \| md \| lg \| undefined`
Default	`md`