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.thumbnail — Dashboard Thumbnails

• RenderTarget.preview — The Preview or live site

import { RenderTarget } from "framer"

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

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 Framer Motion suite. These can be imported directly from framer-motion as you usually would.

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