# React · Veille technologique

[Source canonique](<https://sebastien.rigaux.be/veille/tags/react/page/3>)

Construction d’interfaces avec des composants React, leur état et leurs cycles de rendu.

## [Puck : embarquer un éditeur visuel dans une application React](<https://sebastien.rigaux.be/veille/liens/puck-embarquer-un-editeur-visuel-dans-une-application-react>)

Puck est un composant React pour créer un éditeur par glisser-déposer avec ses propres composants. Son modèle modulaire laisse l’application gérer les données et les règles de composition.

2025-06-01 · [Markdown](<https://sebastien.rigaux.be/veille/liens/puck-embarquer-un-editeur-visuel-dans-une-application-react.md>) · [Ressource originale](<https://github.com/puckeditor/puck>)

## [21st : explorer composants, templates et thèmes React](<https://sebastien.rigaux.be/veille/liens/21st-explorer-composants-templates-et-themes-react>)

21st rassemble des composants et blocs d’interface, notamment des hero sections, cartes et arrière-plans animés. Le catalogue sert à comparer des directions visuelles et récupérer une base à adapter.

2025-05-08 · [Markdown](<https://sebastien.rigaux.be/veille/liens/21st-explorer-composants-templates-et-themes-react.md>) · [Ressource originale](<https://21st.dev/>)

## [Coss UI : une bibliothèque de composants construite sur Base UI](<https://sebastien.rigaux.be/veille/liens/coss-ui-une-bibliotheque-de-composants-construite-sur-base-ui>)

L’ancienne adresse Origin UI mène désormais à coss ui et à son catalogue de composants. Accordéons, dialogues, champs et calendriers donnent une base commune pour assembler des interfaces.

2025-05-08 · [Markdown](<https://sebastien.rigaux.be/veille/liens/coss-ui-une-bibliotheque-de-composants-construite-sur-base-ui.md>) · [Ressource originale](<https://coss.com/ui>)

## [PDFSlick : intégrer navigation et outils PDF dans une application web](<https://sebastien.rigaux.be/veille/liens/pdfslick-integrer-navigation-et-outils-pdf-dans-une-application-web>)

PDFSlick fournit des exemples de lecteurs PDF pour React, Svelte, SolidJS et JavaScript. Navigation, miniatures et zoom illustrent comment traiter les documents comme une partie de l’interface.

2025-05-04 · [Markdown](<https://sebastien.rigaux.be/veille/liens/pdfslick-integrer-navigation-et-outils-pdf-dans-une-application-web.md>) · [Ressource originale](<https://pdfslick.dev/>)

## [Clarifier les états React Query avec le pattern matching](<https://sebastien.rigaux.be/veille/liens/clarifier-les-etats-react-query-avec-le-pattern-matching>)

Gabriel Pichot organise les états loading, erreur, succès et résultat vide avec du pattern matching. L’approche réduit les branches dispersées dans les composants et améliore leur lisibilité.

2025-04-24 · [Markdown](<https://sebastien.rigaux.be/veille/liens/clarifier-les-etats-react-query-avec-le-pattern-matching.md>) · [Ressource originale](<https://www.gabrielpichot.fr/blog/simplify-tanstack-react-query-state-handling-with-pattern-matching/>)

## [React Agent Hooks : exposer l’état d’une interface aux agents](<https://sebastien.rigaux.be/veille/liens/react-agent-hooks-exposer-l-etat-d-une-interface-aux-agents>)

Cette bibliothèque dérive des outils pour LLM à partir de hooks React. L’interface humaine et celle de l’agent peuvent ainsi partager le même état, avec un schéma de modification défini par le développeur.

2025-04-20 · [Markdown](<https://sebastien.rigaux.be/veille/liens/react-agent-hooks-exposer-l-etat-d-une-interface-aux-agents.md>) · [Ressource originale](<https://github.com/chuanqisun/react-agent-hooks>)

## [Construire un chat React avec réponses en streaming](<https://sebastien.rigaux.be/veille/liens/construire-un-chat-react-avec-reponses-en-streaming>)

Robin Wieruch construit un chat Next.js connecté à l’API OpenAI, depuis la route serveur jusqu’à l’interface. Le tutoriel ajoute le streaming pour afficher progressivement les réponses.

2025-04-20 · [Markdown](<https://sebastien.rigaux.be/veille/liens/construire-un-chat-react-avec-reponses-en-streaming.md>) · [Ressource originale](<https://www.robinwieruch.de/react-ai-chat/>)

## [Omlet : visualiser l’usage des composants et de leurs props](<https://sebastien.rigaux.be/veille/liens/omlet-visualiser-l-usage-des-composants-et-de-leurs-props>)

Omlet affiche dans VS Code les usages d’un composant et les valeurs transmises à ses props. Ces informations aident à comprendre l’adoption réelle d’une bibliothèque avant de la faire évoluer.

2025-03-20 · [Markdown](<https://sebastien.rigaux.be/veille/liens/omlet-visualiser-l-usage-des-composants-et-de-leurs-props.md>) · [Ressource originale](<https://marketplace.visualstudio.com/items?itemName=Omlet.omlet-vscode-extension>)

## [Une collection de bibliothèques React pour interfaces animées](<https://sebastien.rigaux.be/veille/liens/une-collection-de-bibliotheques-react-pour-interfaces-animees>)

Ce dépôt rassemble des bibliothèques de composants et design systems React avec des capacités d’animation. Il sert de point de départ pour comparer leurs approches et leurs démonstrations.

2025-02-26 · [Markdown](<https://sebastien.rigaux.be/veille/liens/une-collection-de-bibliotheques-react-pour-interfaces-animees.md>) · [Ressource originale](<https://github.com/sanjay10985/animated-react-collection>)

## [Made with React : découvrir des projets et composants de l’écosystème](<https://sebastien.rigaux.be/veille/liens/made-with-react-decouvrir-des-projets-et-composants-de-l-ecosysteme>)

Ce catalogue présente des applications, composants, frameworks et outils construits autour de React. Les catégories facilitent la recherche d’exemples et de bibliothèques à examiner.

2025-02-25 · [Markdown](<https://sebastien.rigaux.be/veille/liens/made-with-react-decouvrir-des-projets-et-composants-de-l-ecosysteme.md>) · [Ressource originale](<https://madewithreactjs.com/>)

## [Typer une prop polymorphe « as » dans un composant React](<https://sebastien.rigaux.be/veille/liens/typer-une-prop-polymorphe-as-dans-un-composant-react>)

Ce tutoriel construit une prop as qui change l’élément HTML rendu tout en conservant les bons types de propriétés. Il utilise les génériques TypeScript pour éviter qu’un composant accepte les attributs d’une autre balise.

2025-02-22 · [Markdown](<https://sebastien.rigaux.be/veille/liens/typer-une-prop-polymorphe-as-dans-un-composant-react.md>) · [Ressource originale](<https://christianvm.dev/blog/react-as-prop>)

## [Motion Primitives : composer des interfaces avec des animations ajustables](<https://sebastien.rigaux.be/veille/liens/motion-primitives-composer-des-interfaces-avec-des-animations-ajustables>)

Cette collection fournit des composants d’interface animés à copier et personnaliser. Les démonstrations couvrent notamment le texte et les transitions pour enrichir des interactions existantes.

2025-02-20 · [Markdown](<https://sebastien.rigaux.be/veille/liens/motion-primitives-composer-des-interfaces-avec-des-animations-ajustables.md>) · [Ressource originale](<https://motion-primitives.com/>)

## [React Bits : adapter des composants animés depuis leur code source](<https://sebastien.rigaux.be/veille/liens/react-bits-adapter-des-composants-animes-depuis-leur-code-source>)

React Bits rassemble des arrière-plans, effets de texte et composants interactifs installables sous forme de code. Les paramètres exposés permettent d’ajuster mouvement et apparence au projet.

2025-02-15 · [Markdown](<https://sebastien.rigaux.be/veille/liens/react-bits-adapter-des-composants-animes-depuis-leur-code-source.md>) · [Ressource originale](<https://reactbits.dev/>)

## [Normy : normaliser les données pour simplifier les mises à jour de cache](<https://sebastien.rigaux.be/veille/liens/normy-normaliser-les-donnees-pour-simplifier-les-mises-a-jour-de-cache>)

Normy normalise les données chargées par des bibliothèques comme React Query ou SWR. Les entités partagées peuvent ensuite être mises à jour dans plusieurs résultats sans répéter la logique de synchronisation.

2025-01-07 · [Markdown](<https://sebastien.rigaux.be/veille/liens/normy-normaliser-les-donnees-pour-simplifier-les-mises-a-jour-de-cache.md>) · [Ressource originale](<https://github.com/klis87/normy>)

## [Float : régler une animation de flottement en React](<https://sebastien.rigaux.be/veille/liens/float-regler-une-animation-de-flottement-en-react>)

Le composant anime mouvement et rotation avec des ondes sinusoïdales. Amplitude, vitesse et décalage temporel permettent d’ajuster le résultat et de désynchroniser plusieurs éléments.

2025-01-05 · [Markdown](<https://sebastien.rigaux.be/veille/liens/float-regler-une-animation-de-flottement-en-react.md>) · [Ressource originale](<https://www.fancycomponents.dev/docs/components/blocks/float>)

## [ESLint React Hooks : vérifier les règles React dans le code](<https://sebastien.rigaux.be/veille/liens/eslint-react-hooks-verifier-les-regles-react-dans-le-code>)

Le plugin officiel fournit les règles de lint React et une configuration recommandée pour ESLint. La documentation explique son installation et les options liées aux règles expérimentales du compilateur.

2024-12-23 · [Markdown](<https://sebastien.rigaux.be/veille/liens/eslint-react-hooks-verifier-les-regles-react-dans-le-code.md>) · [Ressource originale](<https://www.npmjs.com/package/eslint-plugin-react-hooks>)

## [React Scan : repérer visuellement les rendus coûteux](<https://sebastien.rigaux.be/veille/liens/react-scan-reperer-visuellement-les-rendus-couteux>)

React Scan signale les composants à examiner pour améliorer les performances d’une application React. Son intégration par script ou package facilite un premier diagnostic sans réécrire les composants.

2024-11-24 · [Markdown](<https://sebastien.rigaux.be/veille/liens/react-scan-reperer-visuellement-les-rendus-couteux.md>) · [Ressource originale](<https://react-scan.com/>)

## [Click to Component : ouvrir le code React depuis le navigateur](<https://sebastien.rigaux.be/veille/liens/click-to-component-ouvrir-le-code-react-depuis-le-navigateur>)

Un raccourci de clic sur un composant ouvre son fichier source dans l’éditeur. Le menu contextuel permet aussi d’inspecter ses parents et leurs props pour retrouver plus vite le code concerné.

2024-11-07 · [Markdown](<https://sebastien.rigaux.be/veille/liens/click-to-component-ouvrir-le-code-react-depuis-le-navigateur.md>) · [Ressource originale](<https://github.com/ericclemmons/click-to-component>)

## [Gérer des filtres avancés dans l’URL avec l’App Router](<https://sebastien.rigaux.be/veille/liens/gerer-des-filtres-avances-dans-l-url-avec-l-app-router>)

Aurora Scharff utilise les paramètres d’URL comme source de vérité pour filtres, tri et pagination. L’article traite la coordination de cet état avec les interactions et les composants serveur.

2024-11-07 · [Markdown](<https://sebastien.rigaux.be/veille/liens/gerer-des-filtres-avances-dans-l-url-avec-l-app-router.md>) · [Ressource originale](<https://aurorascharff.no/posts/managing-advanced-search-param-filtering-next-app-router/>)

## [Nuqs : synchroniser l’état React avec les paramètres d’URL](<https://sebastien.rigaux.be/veille/liens/nuqs-synchroniser-l-etat-react-avec-les-parametres-d-url>)

Nuqs propose une API proche de useState avec parsers typés et contrôle de l’historique. Elle facilite des filtres partageables et rechargeables dont l’état reste dans l’URL.

2024-11-04 · [Markdown](<https://sebastien.rigaux.be/veille/liens/nuqs-synchroniser-l-etat-react-avec-les-parametres-d-url.md>) · [Ressource originale](<https://nuqs.dev/>)

Page 3 / 4

[Précédent](<https://sebastien.rigaux.be/veille/tags/react/page/2>)

[Suivant](<https://sebastien.rigaux.be/veille/tags/react/page/4>)
