How to use overrides

Creation

Your project can store multiple separate files with overrides, allowing you to organize them as desired or easily move them between projects. To recognize your overrides in the code, Framer utilizes the TypeScript type system. Therefore, you need to decorate your exported functions as ComponentType.

import type { ComponentType } from "react” 

export function withLink(Component): ComponentType { ... }

You can name your override however you prefer, but conventionally we like to prefix the name with "withTapAnimation", "withBlueColor", or "withCurrentTime". Components are motion-enabled elements (e.g., motion.div) and support all the capabilities of Motion by default. They are ideal for creating fast 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> 
    ) 
  } 
}

Note: Overrides cannot have props, so sometimes you need to create a new override for each unique value, such as a URL. We plan to enhance this functionality in the future.

Note: Overrides are only visible in the preview and not on the canvas.