API Reference

A list of exports from the framer library available in every Code Component.

RenderTarget

To detect which context your Code Component is currently being shown, you can import and use RenderTarget. This includes RenderTarget.current() function to check the current RenderTarget as well as few types to check them against.

• RenderTarget.canvas — The Canvas

• RenderTarget.export — The Export Canvas

• RenderTarget.thumbnail — Project Thumbnails

• RenderTarget.preview — The Preview or live site

import { RenderTarget } from "framer"

const isOnCanvas = RenderTarget.current() === RenderTarget.canvas

Canvas and Export

For Components that animate, like WEBGL shaders, we have a custom hook that we recommend you use instead. This ensures that your Component is static both on the Canvas and the exported assets—preventing performance issues on the Canvas and exporting issues like tiling, which are issues caused by the Component still animating during export. For all animated components, instead of RenderTarget, use this hook.

import { useIsStaticRenderer } from "framer"

// Static on both Canvas and Export
const isStaticRenderer = useIsStaticRenderer()

Localization

When using Localization with Framer you may want to create a custom Locale Picker. In most cases you should do this with Smart Components, which you can learn about in the Localization 2.0 video. However if you have very specific needs based on logic there is an API for getting and setting the current Locale info.

useLocaleInfo()

const { activeLocale, locales, setLocale } = useLocaleInfo()

function handleChange(event) {
    const locale = locales.find((locale) => locale.id === localeId)
    setLocale(locale)
}

return (
  <select
    value={activeLocale?.id ?? "default"}
    onChange={handleChange}
  >
    {locales.map((locale) => (
      <option key={locale.id} value={locale.id}>
        {locale.name}
      </option>
    ))}
  </select>
)

Property Controls

Property Controls allow users to pass props to a Code Component through the Framer interface. There is only one function needed for this feature, however the full type reference can be found in our Property Controls Guide.

addPropertyControls(component, controls)

import { addPropertyControls, ControlType } from "framer"

function Button(props) {
  const { tint = "#09F" } = props

  return <button style={{ background: tint }}>Hello</button>
}

addPropertyControls(Button, {
  tint: {
    type: ControlType.Color
  }
})

Framer Motion

Also available in every Code Component is the entire Motion for React API. This can be imported from "framer-motion".

import { animate, motion } from "framer-motion"