addPropertyControls()

addPropertyControls() est une fonction de la bibliothèque Framer qui vous permet d'ajouter des contrôles de propriétés à vos composants React. Elle offre à l'utilisateur une interface pour ajuster les propriétés de votre composant dans l'environnement de conception de Framer. Les designers peuvent ainsi manipuler plus facilement le design directement, sans modifier le code.

Syntaxe :

addPropertyControls(component, controls)

Paramètres :

• component : le composant React auquel vous souhaitez ajouter des contrôles.

• controls : un objet qui définit les contrôles. Chaque paire clé-valeur de l'objet correspond à une prop du composant. La clé est le nom de la prop et la valeur est un objet ControlDescription.

Exemple :

import { addPropertyControls, ControlType } from 'framer';

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

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

import { addPropertyControls, ControlType } from 'framer';

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

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

import { addPropertyControls, ControlType } from 'framer';

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

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

RenderTarget()

RenderTarget est un enum de la bibliothèque Framer qui vous aide à comprendre le contexte dans lequel votre composant est rendu. Cela vous permet d'adapter le comportement de votre composant en fonction du contexte. Il est souvent utilisé dans le hook useEffect() ou pour afficher des éléments de manière conditionnelle.

Valeurs :

• RenderTarget.canvas : rendu sur le canevas Framer.

• RenderTarget.preview : rendu dans l'aperçu.

• RenderTarget.export : rendu pour l'exportation.

Exemple :

import { RenderTarget } from 'framer';

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

import { RenderTarget } from 'framer';

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

import { RenderTarget } from 'framer';

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