Using Code Overrides
Overrides allow you to “hack” Framer to do things that you can’t do from the interface (yet). They are pieces of code that allow you to change a property of an element with some code. This pretty much allows you to do anything to any element on the canvas, from changing a color to feeding it real data to animating on an event.
⚠️ Overrides only render in the preview (you can’t see the results on the canvas).
Creation
Your project can keep multiple separate files with overrides so that you can organize them however you like, or quickly move them around to different projects.
Framer needs to recognize your overrides from the code and does so with the TypeScript type system. Therefore you have to decorate your (exported) functions as ComponentType.
import type { ComponentType } from "react”
export function withLink(Component): ComponentType { ... }
You can name your override any way you like, but by convention we like to prefix the name with like withTapAnimation, withBlueColor or withCurrentTime.
Components are Motion enabled elements (like motion.div) so they support everything Motion can do out of the box. Great for quick animations and effects.
Link Override
Overrides can also change the structure. Here we wrap the component inside of a link element.
export function withLink(Component): ComponentType { return (props) => { return ( <a href="<http://koenbok.com>"> <Component {...props} /> </a> ) } }
Gotchas
Overrides can’t have props so sometimes you have to make a new override for every override that has a unique value (like a url). We’re looking to improve this in the future.
