addPropertyControls()

addPropertyControls() est une fonction de la bibliothèque Framer qui vous permet d'ajouter des contrôles de propriété à vos composants React. Cela donne à l'utilisateur une interface pour ajuster les propriétés de votre composant dans l'environnement de conception de Framer. Cela facilite la manipulation du 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 dans l'objet correspond à une prop dans le 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' },
});

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'ajuster le comportement de votre composant en fonction du contexte. Il est souvent utilisé dans le hook useEffect() ou pour rendre des éléments conditionnellement.

Valeurs :

• RenderTarget.canvas : Rendu sur le Framer Canvas.

• 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
    }
}