Overriding Code Components

Default Components and Code Components from Packages allow you to add a ton of interactivity directly into your project without ever touching a single line of code.

On top of the default functionality they bring, you can often override some of the static and interactive behavior they have. This can be done by adding a code override on top of the component.

Code overrides are snippets of Javascript placed on top of a component, and are executed the moment your prototype is previewed (e.g. in the Prototype view or Preview). They can be placed on top of elements you draw on the canvas such as a Frame or Text layer, but you can use these to override Code Components also.

Note: Grasping the techniques outlined in this article will allow you create many more custom interactions in your Framer prototypes. Most common state changes triggered by interactions can be achieved with the concepts explained below.

Overriding the Checkbox Component

The Default Components come with a number of built-in properties. You can easily see which properties a Code Component is composed of by enabling Handoff mode. Using this, you can see exactly which property you need to target with a code override.

Let’s add a basic override to the Checkbox component to control whether its checked or not.

Inspecting the properties

  1. In a project, add the Checkbox component from the Default Components in the Insert menu
  2. Drag the Checkbox to a frame, and select the Handoff tool
  3. When having the component selected, you now see all its properties on the right panel

From here, we can pick any property that we want to override. Let’s take note of the isChecked={true} prop.

Creating an override

  1. Click on Handoff once again (or hit esc) to get out of Handoff mode
  2. Select the Checkbox on the canvas, and in the Properties panel, set the Checked property to No
  3. Directly above in the Properties panel, open the Overrides panel
  4. For File, select an existing file or choose to create a new file
  5. Click the Edit Code button to be brought to the code file

We’ve set our checkbox to be unchecked by default. We are going to overrule this with a code override to set it to checked instead.

To start, we can use the standard body for any override:

export function OverrideName(): Override {
return {
// here you’ll add your code
}
}
COPY

Now give the override a name, and override the isChecked property (that we noted in our Handoff panel) within our return statement:

export function Checkbox(): Override {
return {
isChecked: true;
}
}
COPY

Note: We did not yet apply this override to the checkbox. Head back to the canvas and, in the Properties panel, select the correct name of the override you just created (mine is called Checkbox).

If you now preview the frame showing your checkbox, it will always start out as checked. Even though we set the initial property in the Properties panel to not have our checkbox checked (i.e. false), our code override makes sure it is set to true when it renders in the preview.

This example sets the tone to create more advanced and common interactions. Continue reading to see how we can take this to the next level.

Example project

Click the link below to view a working example of the above override.

The checkbox is placed in the center of the Frame and has the override applied. Click on the checkbox and select Edit Code from the Overrides section in the properties panel to see how this is set up.

Example project file ›

Controlling multiple checkboxes from one

Overrides don’t just allow us to override one element, but we can also pass data between multiple overrides and multiple elements.

We can do this with the Data object, which allows us to store values to ánd retrieve values from. Head over to our API docs to learn more about the Data object.

Storing state using the Data object

We’re going to create an example where one checkbox can control the state of as many other checkboxes as we want. For this, we’ll create one Data object and two overrides:

  1. In your code overrides file, add a Data object to the top and create a new property consisting of a key (or a name) and a value (the initial value we give it). For my example, I’ve used a key called setAllChecks with an initial value of false.
const data = Data({
setAllChecks: false,
})
COPY

Creating an override for our primary checkbox

  1. On the canvas, select the Checkbox component and, using Handoff mode, inspect the properties we can target from code.
  2. We’ll be using the onToggle function, which allows us to do something each time we toggle the checkbox.
  3. Create a new override, and add the onToggle property to it.
export function TopCheckbox(): Override {
return {
onToggle: () => {
// do something
},
}
}
COPY

Setting state with the onToggle event

  1. We’ve added the : () => to onToggle because onToggle actually indicates an event (if it starts with on it is usually an event). This event should trigger a function. To save us time, we use an arrow function which is just a shorthand way of initiating a function.
  2. In our function body, we will assign a new value to the value stored under setAllChecks, in our Data object.
export function PrimaryCheckbox(): Override {
return {
onToggle: () => {
data.setAllChecks = !data.setAllChecks
},
}
}
COPY

By writing data.setAllChecks = !data.setAllChecks, we say that we want to assign a new value to setAllChecks stored in data. The new value we assign is just the opposite of what it currently is, indicated by the exclamation mark which is a NOT operator. Translated, we basically say the following:

In the data object, find setAllChecks. Now assign a new value to it, and make this new value be the opposite of what it was.

Because the opposite of false is true, and the opposite of true is false, each time we toggle the checkbox we assign a new value of either false or true.

Now let’s use this to control the other checkboxes.

Listening to state from other components

Write a new override, and in the return function, use the same isChecked property we used in the first example of this article:

export function SecondaryCheckboxes(): Override {
return {
isChecked: true,
}
}
COPY

We want our isChecked property to not always be true for these checkboxes, but only if the primary checkbox is checked. We can do this by checking the current value of data.setAllChecks:

export function SecondaryCheckboxes(): Override {
return {
isChecked: data.setAllChecks ? true : false,
}
}
COPY

By writing isChecked: data.setAllChecks ? true : false, we are running a check before deciding on whether isChecked: will be set to true or false.

We do this with a ternary operator, which essentially checks if a value is true (indicated with ?) and if so, sets your specified value. If not (indicated with :), it will set a different value.

In our example, we check if data.setAllChecks is true, and if so, we set isChecked: true. If data.setAllChecks is false, we set isChecked: false.

All we now need to do is attach the second override to each other checkbox that we have, and we are able to fully control them from our primary checkbox.

Example project

Click the link below to view a working example of the above overrides.

The top checkbox has the PrimaryCheckbox override applied to it, and controls the other checkboxes which all have the SecondaryCheckboxes override applied.

Example project file ›