Adding Property Controls to a Code Component

Note: This article uses Framer’s code features. Find out how to enable code features in your project.

When creating code components, property controls can be added that will appear in the properties panel. Various controls can be surfaced to allow for the customizability of code components, from color pickers to segmented controls.

The addPropertyControls function is used and defines what will be rendered within the property panel in Framer. In the default code component, you can see there are three property controls already written for you:

import * as React from "react"
import { Frame, addPropertyControls, ControlType } from "framer"
// Learn more: https://framer.com/api
export function MyComponent(props) {
const { text, tint, onTap, ...rest } = props
return (
<Frame
{...rest}
background={tint}
onTap={onTap}
whileHover={{
scale: 1.1,
}}
style={{
color: "#fff",
fontSize: 16,
fontWeight: 600,
}}
>
{text}
</Frame>
)
}
MyComponent.defaultProps = {
height: 128,
width: 240,
text: "Get started!",
tint: "#0099ff",
}
// Learn more: https://framer.com/api/property-controls/
addPropertyControls(MyComponent, {
text: {
title: "Text",
type: ControlType.String,
defaultValue: "Hello Framer!",
},
tint: {
title: "Tint",
type: ControlType.Color,
defaultValue: "#0099ff",
},
onTap: {
type: ControlType.EventHandler,
},
}
COPY

The PropertyControls type is necessary for Framer to detect it. Within the object, you can give the property any name you’d like (such as text, color or a navigation trigger in the default example), and then you pass along an object which should include e.g. a type and a title for the text control.

The type defines the type of control, and the title defines what will display in the property panel. For a complete overview of all available properties, install this example Package.

To learn everything about Property Controls, check out the API Documentation.