Reference

Framer Library

PropertyControls()

addPropertyControls() is a function from the Framer library that allows you to add property controls to your React components. It gives the user a UI to adjust properties of your component in Framer's design environment. This makes it easier for designers to manipulate the design directly, without editing the code.

Syntax:

addPropertyControls(component, controls)

Parameters:

component: The React component you wish to add controls to.
controls: An object that defines the controls. Each key-value pair in the object corresponds to a prop in the component. The key is the prop name, and the value is a ControlDescription object.

Example:

import { addPropertyControls, ControlType } from 'framer';

function MyComponent(props) {
    return <div>{props.text}</div>;
}

addPropertyControls(MyComponent, {
    text: { type: ControlType.String, title: 'Text' },
});

RenderTarget()

RenderTarget is an enum from the Framer library that helps you understand the context in which your component is being rendered. This allows you to adjust your component's behavior based on the context. It's often used in the useEffect() hook or conditionally render elements.

Values:

RenderTarget.canvas: Rendered on the Framer Canvas.
RenderTarget.preview: Rendered in the preview.
RenderTarget.export: Rendered for export.

Example:

import { RenderTarget } from 'framer';

function MyComponent() {
    if (RenderTarget.current === RenderTarget.preview) {
        // The component is being rendered in the preview
    }
}

Shortcuts list

Values:

RenderTarget.canvas: Rendered on the Framer Canvas.
RenderTarget.preview: Rendered in the preview.
RenderTarget.export: Rendered for export.

Example:

import { RenderTarget } from 'framer';

function MyComponent() {
    if (RenderTarget.current === RenderTarget.preview) {
        // The component is being rendered in the preview
    }
}

Custom styling

Values:

RenderTarget.canvas: Rendered on the Framer Canvas.
RenderTarget.preview: Rendered in the preview.
RenderTarget.export: Rendered for export.

Example:

import { RenderTarget } from 'framer';

function MyComponent() {
    if (RenderTarget.current === RenderTarget.preview) {
        // The component is being rendered in the preview
    }
}

PropertyControls()

RenderTarget()

Shortcuts list

Custom styling