-
Notifications
You must be signed in to change notification settings - Fork 97
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
docs: customize image component #505
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
import { type FrameUIComponents } from "@frames.js/render/ui"; | ||
import Image from "next/image"; | ||
|
||
/** | ||
* StylingProps is a type that defines the props that can be passed to the components to style them. | ||
*/ | ||
type StylingProps = { | ||
className?: string; | ||
style?: React.CSSProperties; | ||
}; | ||
|
||
/** | ||
* You can override components to change their internal logic or structure if you want. | ||
* By default it is not necessary to do that since the default structure is already there | ||
* so you can just pass an empty object and use theme to style the components. | ||
* | ||
* You can also style components here and completely ignore theme if you wish. | ||
*/ | ||
const components: FrameUIComponents<StylingProps> = { | ||
Image: (props, stylingProps) => { | ||
if (props.status === "frame-loading") { | ||
return <></>; | ||
} | ||
|
||
// Here you can add your own logic to sanitize and validate the image URL | ||
let sanitizedSrc = props.src; | ||
|
||
// Don't allow data URLs that are not images | ||
stephancill marked this conversation as resolved.
Show resolved
Hide resolved
|
||
if (props.src.startsWith("data:") && !props.src.startsWith("data:image")) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can we include this in the default Image implementation @stephancill ? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. opened a separate PR #506 |
||
sanitizedSrc = ""; | ||
} | ||
|
||
// Don't allow SVG data URLs | ||
stephancill marked this conversation as resolved.
Show resolved
Hide resolved
|
||
if (props.src.startsWith("data:image/svg")) { | ||
sanitizedSrc = ""; | ||
} | ||
|
||
return ( | ||
<Image | ||
{...stylingProps} | ||
src={sanitizedSrc} | ||
onLoad={props.onImageLoadEnd} | ||
onError={props.onImageLoadEnd} | ||
alt="Frame image" | ||
sizes="100vw" | ||
height={0} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. would add a todo implement comment with a quick example in comments of using the props to get the dimensions of the frame There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @stephancill think you missed this |
||
width={0} | ||
/> | ||
); | ||
}, | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we should also include this in https://framesjs.org/guides/apps/display-frames-in-react-native
and also include a list of security properties here to check
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
React native doesn't have a built-in image proxy - what should we suggest?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
would just make a comment that it's a suggestion for privacy reasons. People can always use a next.js image proxy for this and just handle it via a next.js endpoint like
/proxy?img=[src]