It’s true that the code components you write in Framer X are just React components, but that’s not really the whole story.
Code components in Framer X involve some special concerns. The Framer library provides some special components, such as Frame and Stack, that set a bar for what users of your components will expect. It also provides Property Controls for setting props from the canvas, and these can complicate your component’s props. And while creating a component for the canvas is easy enough, chances are you’ll be eventually create code components for use both on the canvas and inside of other code components. And there’s some art to creating a component that behaves just as well on the canvas as it does when created from code.
After writing many of these components myself, I’ve recognized a few patterns and best practices to that make it easy to make sure that things go smoothly. If you’re ready to go deeper into Framer’s code components, then this article should spare you some of the bruises I got bumping my way in the dark.
One last note: as the title suggests, this article is for more advanced users. If you’re new to React or to TypeScript, you’ll encounter some new terms and ideas without much context. That said, you might still learn a bit about how Framer’s components work by seeing how they break, too.
Code Component Boilerplate
First, here’s the sample code that you can modify for your own components. Below the fold, I’ll walk through the different patterns included in this boilerplate and why they’re there.
At the start of your file, you’ll need to import a few items from the Framer library. Here are the minimum, assuming you’ll be using a Frame as your component’s top-level container.(More on this below).
import * as React from"react"
import {
Frame,
FrameProps,
addPropertyControls,
ControlType,
} from"framer"
If you’re using other components from Framer’s library, then you’ll need to import them, too. For example, if your project involves Stack, add Stack to the list of imports.
import * as React from"react"
import {
Frame,
FrameProps,
Stack,
addPropertyControls,
ControlType,
} from"framer"
Props
Next, add a type for your component’s props.
type Props = -
Partial<{
// optional props
photo: string
}> & {
// required props
name: string
}
Your components props will have three parts: the props of your container, a set of optional props, and a set of required props. Heres how I structure my props.
Code Component Boilerplate
Imports
import * as React from "react"import { Frame, FrameProps, addPropertyControls, ControlType,} from "framer"import * as React from "react"import { Frame, FrameProps, Stack, addPropertyControls, ControlType,} from "framer"Props
type Props = - Partial<{ // optional props photo: string }> & { // required props name: string }