Want to build websites in no-time? Announcing the new Framer Beta.Learn more
Framer
DocumentationCode in Framer
RenderTarget
  • Overview
  • Motion
  • Handshake
  • Guides
  • API Documentation
Want to build websites in no-time? Announcing the new Framer Beta.Learn more
Framer
  • Teams
  • Showcase
  • Developers
  • Resources
    • Tutorials
    • Examples
    • Components
    • Templates
    • Sessions
    • Support
    • Updates
  • Blog
  • Pricing
  • ···
    • Blog
    • Pricing
DocumentationCode in Framer
RenderTarget
  • Overview
  • Motion
  • Handshake
  • Guides
  • API Documentation
Getting started
  • Introduction
  • Examples
API
  • Animation
  • Transition
  • Gestures
  • MotionValue
  • Utilities
Components
  • motion
  • AnimatePresence
  • LayoutGroup
  • LazyMotion
  • MotionConfig
  • Reorder
3D
  • Introduction
  • LayoutCamera
  • LayoutOrthographicCamera
  • MotionCanvas
Motion resources
  • Accessibility
  • Reduce bundle size
  • Upgrade guides
Code in Framer
  • Utilities
  • RenderTarget
  • Property Controls
Community
  • GitHub
  • Discord

RenderTarget

The current environment of a component. Often the canvas or preview in Framer.

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 />
}
PreviousUtilitiesNextProperty Controls
On this page
  • Properties
  • Functions

Framer

  • Teams
  • Pricing
  • Showcasenew
  • Blog
  • Developers
  • Updates

Platforms

  • Web
  • macOS
  • Windows
  • iOS
  • Android

Learn

  • Tutorials
  • Examples
  • Templates
  • Sessions

Resources

  • Components
  • Input Kit
  • State of Prototyping
  • Desktop Prototyping
  • Prototyping Tool
  • Mockup Tool
  • Wireframing Tool
  • UI/UX Design Tool
  • Graphic Design Tool
  • User Testing

About

  • Loupe
  • Community
  • Company
  • Careers
  • Legal

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement