RenderTarget

Components can use the RenderTarget.current() method to check for the environment within their components and vary rendering accordingly. The most common case would be to improve performance while rendering in the canvas, where components that take too long to render will be replaced with a placeholder. The RenderTarget.hasRestrictions() method can be used to check explicitly for this case.

#Properties

#RenderTarget.canvas

The component is to be rendered for the Framer canvas.

function App() {
  if (RenderTarget.current() === RenderTarget.canvas) {
    return <CanvasComponent />
  }

  return <DefaultComponent />
}

#RenderTarget.export

The component is to be rendered for export.

function App() {
  if (RenderTarget.current() === RenderTarget.export) {
    return <ExportComponent />
  }
  return <DefaultComponent />
}

#RenderTarget.preview

The component is being rendered in the preview window.

function App() {
  useEffect(() => {
    if (RenderTarget.current() === RenderTarget.preview) {
      // Do something in preview.
    }
  })
  return <DefaultComponent />
}

#RenderTarget.thumbnail

The component is to be rendered as a preview thumbnail, for example in the component panel.

function App() {
  if (RenderTarget.current() === RenderTarget.thumbnail) {
    return <Thumbnail />
  }
  return <DefaultComponent />
}

#Functions

#RenderTarget.current(): RenderTarget

Returns the current RenderTarget allowing components to apply different behaviors depending on the environment.

function App() {
  if (RenderTarget.current() === RenderTarget.thumbnail) {
    return <PreviewIcon />
  }
  return <div>...</div>
}

#RenderTarget.hasRestrictions(): boolean

Returns true if the current RenderTarget has performance restrictions. Use this to avoid doing heavy work in these contexts because they may bail on the rendering if the component takes too long.

function App() {
  if (RenderTarget.hasRestrictions()) {
    return <SomePlaceholder />
  }
  return <RichPreviewContent />
}