Écrit par Steve Sewell.

Comment Stripe réalise-t-il cette superbe animation de menu de morphing ?

Recréons cela dans React avec juste quelques lignes de logique : ```ts const [hovering, setHovering] = useState(null); const [popoverLeft, setPopoverLeft] = useState(null); const [popoverHeight, setPopoverHeight] = useState(null); const refs = useRef<(HTMLElement | null)[]>([]); const onMouseEnter = (index : nombre, el : HTMLElement) => { setHovering(index); setPopoverLeft(el.offsetLeft); const menuElement = refs.current[index]; if (menuElement) { setPopoverHeight(menuElement.offsetHeight); } } ; ``` Nous utiliserons également l'IA et Tailwind pour créer le balisage, afin de passer rapidement d'une application de base Hello World à ceci comme résultat final :

Générer le balisage

Commençons par une application React vierge. Vous pouvez utiliser Next.js, Remix ou même être un enfant cool et utiliser Qwik si vous le souhaitez. Voici où j'ai commencé :

exporter la fonction par défaut Home() { return

Bonjour le monde

; }

Superbe!

Mais c’est loin de ressembler à ce que nous souhaitons, et coder manuellement l’intégralité d’un site Stripe prendra beaucoup de temps.

Mais heureusement, nous disposons de l’IA qui nous permet d’atteindre 80 % du chemin sans tout ce travail.

J'ai commencé avec ces maquettes dans Figma et j'ai utilisé le plugin Builder.io pour les convertir en code React + Tailwind à l'aide de Visual Copilot.

En cliquant simplement sur Generate , nous sommes lancés dans Builder.io et nous pouvons copier le code et le coller dans notre base de code.

Je l'ai mis dans un nouveau composant que j'ai nomméStripeHéros:

fonction d'exportation StripeHero() { return /* balisage généré par Builder.io */ }

J'importe ensuite cela dans ma page :

importer { StripeHero } depuis "@/components/StripeHero" ; exporter la fonction par défaut Home() { return; }

Et on obtient ceci :

Beaucoup mieux !

Nous voulons maintenant extraire le balisage des liens de navigation dans leur propre composant afin de pouvoir y ajouter notre logique.

De notreStripeHéroscomposant, j'ai découpé cette section et l'ai amenée à un nouveauNavigationcomposant:

fonction d'exportation Nav() { retour (); }

Et puis de retour dans notreStripeHéros, nous référencerons...
[Courte citation de 8% de l'article original]