Skip to content

Instantly share code, notes, and snippets.

@josefrichter
Forked from steveruizok/Example.tsx
Last active October 15, 2019 16:32
Show Gist options
  • Save josefrichter/bc4980bece2bee8b4bd49a02dcd38754 to your computer and use it in GitHub Desktop.
Save josefrichter/bc4980bece2bee8b4bd49a02dcd38754 to your computer and use it in GitHub Desktop.
An example Framer X code component.
import * as React from "react"
import {
Frame,
FrameProps,
addPropertyControls,
ControlType,
} from "framer"
type Props = Partial<FrameProps> &
Partial<{
// optional props
color: string,
text: string,
}> & {
// required props
}
export const UserCard = (props: Props) => {
// Destructure out all the custom props
const { color, text, ...rest } = props
return (
<Frame
// First, declare any custom props that may be overrided
// Next, spread in all the container props
{...rest}
// Finally, declare any forced props
style={{
color: color,
// If you're using style, spread in props.style too
...style,
}}
>
{text}
</Frame>
)
}
UserCard.defaultProps = {
height: 375, // set default props to control starting size on canvas
width: 240,
text: "My Component", // and set defaults for any required props
}
addPropertyControls(UserCard, {
text: {
title: "Text",
type: ControlType.String,
defaultValue: "My Component",
},
color: {
title: "Color",
type: ControlType.Color,
defaultValue: "#fff",
},
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment