Commencer

Les composants de code peuvent étendre les capacités de Framer en rendant n'importe quel composant React directement sur la toile. Framer dispose d'un éditeur de code intégré pour les écrire directement dans Framer.

Les composants Framer ne sont que de simples composants React, mais ils ont quelques extras utiles pour les rendre plus puissants dans les flux de travail de Framer :

• Ajouter des contrôles de propriété

• Framer Motion intégré

• Partage avec une URL

Notions de base

Pour créer un nouveau composant de code, allez dans le panneau des actifs et cliquez sur Code. Ensuite, cliquez sur Créer Fichier de Code. Vous serez présenté avec un nouveau fichier de code qui exporte un seul composant React. Vous verrez que nous importons quelques aides spéciales de la bibliothèque framer que nous utilisons pour donner du pouvoir au composant dans Framer.

import { addPropertyControls, ControlType } from "framer"

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

addPropertyControls(MyComponent, {
  text: { 
    type: ControlType.String, 
    defaultValue: "Hello World!" 
  },
})

Dans ce cas, nous construisons un composant React normal, mais en ajoutant un contrôle pour permettre la définition de la propriété Texte depuis la toile. Pour configurer cela, nous utilisons l'API addPropertyControls comme vu ci-dessus.

Dimensionner votre composant

Il y a quatre paramètres pour la mise en page des composants de code dans Framer : auto, fixed, any, et any-prefer-fixed. Ceux-ci peuvent être définis pour l'axe de largeur ou de hauteur individuellement, en utilisant les annotations @framerSupportedLayoutWidth et @framerSupportedLayoutHeight.

• auto — Le composant dictera sa propre taille.

• fixed — Le composant est dans un conteneur de taille fixe & peut remplir le parent.

• any — L'utilisateur peut basculer entre auto et fixed pour la taille.

• any-prefer-fixed — Sera inséré avec une taille réglée sur fixed.

Le code suivant fera en sorte que votre composant ait une taille automatique pour la largeur, mais pas pour la hauteur. Vous pouvez faire de ces deux propriétés n'importe quelle combinaison d'options de taille tant que vous avez spécifié à la fois la largeur & la hauteur.

/**
* @framerSupportedLayoutWidth auto
* @framerSupportedLayoutHeight fixed
*/
export function Toggle(props) { ...

Ces annotations permettent à Framer de savoir quelle taille votre composant doit être inséré dans la toile lorsque la taille fixe est activée. Dans ce cas, il sera inséré avec une largeur de 200px et une hauteur de 200px.