Code overrides are JavaScript functions that can be "connected" or "applied" to any Frame or component on the Framer X canvas. An override is called with the props the connected component and returns an object of new props that are merged into the components props. The same override may be used on many components.

import { Override } from "framer"

export const Rotate90Degrees: Override = (props) => {
  return {
    rotate: 90
  }
}


Like props themselves, overrides can be used in many ways: both to override styling properties like opacity  and fill  — but allow to pass event callback props and conditional values, enabling interactivity, facilitating communication between components, and declaring stateful animations.

Overrides only apply when you Preview your project. However, if your project includes a Data object, then the override will re-apply each time the Data object's properties change. In this way, you can begin to design for state by creating overrides with properties that are conditional on the values of a Data object.

import { Data, Override } from "framer"

const data = Data({
  degrees: 0
})

export const RotateDegrees: Override = (props) => {
  return {
    rotate: data.degrees
  }
}

export const BumpRotation: Override = (props) => {
  return {
    onTap: () => data.degrees = data.degrees + 15
  }
}


In other words, overrides – with the Data object working to control state – are how stuff happens in Framer X.

Creating a code override

You can write an override in any code file in your project. Framer X will discover these overrides automatically, so long as you:

  • export the override function from the file
  • type the function with the Override alias

Applying a code override

You can apply any code override to any Frame (or Component) on the canvas. 

To apply a code override: 

  1. Select the Frame or Component that you'd like to override
  2. On the properties panel, select the Override menu
  3. In the File dropdown, select the File where your override lives
  4. In the Override dropdown, select the override you would like to apply to the selected Frame or Component

Some things to keep in mind:

  • If your override file has an error, it may not appear in the File dropdown, and Frames connected to those overrides will lose their overrides. However, fixing the error will restore both the file and the overrides
  • If your project includes a Data object, your overrides will re-apply each time the Data object's properties change.
Did this answer your question?