React Components

Source: https://github.com/brillout/awesome-react-components at 66b2758c4808
License: CC0-1.0
Read the English original

This edition is an AI-assisted translation.

Absolument génial React Composants et bibliothèques

Ceci est une liste de composants AWESOME. Non, ce n’est pas une liste complète de chaque React composant sous le soleil. Qu’est-ce que ça veut dire ? Et bien :

• Ça résout un vrai problème.
• Il le fait de façon unique, magnifique ou exceptionnelle. (Et ce n’est pas super populaire et bien connu… aucun intérêt à les énumérer.)
• Il a récemment code s’engage !

Cherchez un .. pour des projets vraiment étonnants. Et recherchez des commentaires et des avis sur quickie maintener dans (italic parens) après quelques annonces de note.

Voir aussi: Awesome React Frameworks.

Mainteneurs:

• @petebray, author of Fluxguard — monitor PROD website changes.
• @brillout, author of Vike — a fast Vite-based React framework that is flexible, lean, community-driven and dependable.

Contribution

Veuillez consulter notre lignes directrices pour la contribution. Nous gardons cette liste fraîche par exiger que toutes les PR suppriment une ou plusieurs entrées non-souvent de cette liste. S’il vous plaît PR seulement une nouvelle ressource si vous supprimez ALSO une.

Sommaire

• UI Composantes
  • Grille de données modifiable / tableur
  • Tableau
  • Scroll infini
  • Couverture
  • Notification
  • Outils
  • Menu
  • Sticky
  • Tables
  • Chargeur
  • Captcha
  • Carrousel
  • Boutons
  • Effacement
  • Graphique
  • Palette des commandes
  • Arbre
  • UI Navigation
  • Barre de défilement personnalisée
  • Audio / Vidéo
  • Carte
  • Heure / Date / Âge
  • Photo / Image
  • Icônes
  • Paginateur
  • Markdown Affichage
  • Toile
  • Capture d’écran
  • Divers
  • Composants du formulaire
    • Date / Sélection du temps
    • Picker Emoji
    • Types d’entrée
    • Autocomplet
    • Sélectionner
    • Cueillette de couleurs
    • Basculer
    • Slider
    • Bouton radio
    • Type Sélectionner
    • Entrée de l’étiquette
    • Entrée automatique / zone de texte
    • Catégorie
    • Faites glisser et déposez
    • Liste triable
    • Éditeur de texte riche
    • Markdown Éditeur
    • Édition de l’image
    • Recouvrement des composantes du formulaire
    • Divers
    • Syntaxe mise en évidence
• UI Mise en page
• UI Animation
  • Parallaxe
• UI Cadres
  • Réceptif
    • Material Design
  • Mobile
  • Recouvrement des composantes
• UI Services publics
  • Reporter
    • Rapporteur de visibilité
    • Rapporteur de mesure
  • Entrée du périphérique
    • Événements clavier
    • Faire défiler les événements
    • Touchez Swipe
    • Événements de la souris
  • Meta Tags
  • Portail
  • Tester le comportement de l’utilisateur
• Code Design
  • Magasin de données
  • Logique du formulaire
  • Routeur
  • Props depuis le serveur
  • Communication avec le serveur
  • CSS / Style
  • HTML Modèle
  • Applications isomorphes
  • Chaudière
  • Divers
• Services publics
  • i18n
  • Fixations-cadres / intégrations
  • Intégrations avec des services tiers
• Rendement
  • UI
    • Inspecter
    • Charge paresseuse
  • Taille de l’application
  • Rendu à l’aide du serveur
• Outils Dev
  • Essai
  • Redux
  • Inspecter
  • Divers
• Divers
  • Générateur de site Web statique
• Solutions Cloud
  • Bases de données

UI Composantes

Back to top ⬆️

Grille de données modifiable / tableur

• AG Grid - Grille de données avancée / Tableau de données Javascript / React / AngularJS / Composants Web.
• fortune-sheet - Un composant de spreedsheet en ligne qui fournit des fonctionnalités hors de la boîte tout comme Excel.
• gigatables-react - Tri, pagination / défilement infini, recherche globale / colonne, AJAX Et plus encore.
• Handsontable - demo - docs - Grille de données avec tableur UI soutien React, Angular, TypeScript et JavaScript.
• jqwidgets-react-grid - Filtrage, Pagination, Groupement, Exporter vers Excel, PDF, CRUD et plus.
• MUI X Data grid - demo/docs - Grille de données rapide et personnalisable avec des fonctionnalités avancées pour les utilisateurs de puissance et des cas d’utilisation complexes.
• react-data-grid - Une grille comme Excel.
• ReactGrid - demo/docs - Ajouter un comportement semblable à un tableur à votre application
• revo-grid - demo/docs - Grille de données Powerfull pour React / AngularJS / Vue / Composants Web avec personnalisation avancée.
• SheetXL – A high-performance spreadsheet grid. TypeScript, ESM, Node/browser, Excel-compatible functions.
• SVAR React DataGrid - demo - docs - React DataGrid avec édition en cellule, données arborescentes, menu contextuel, défilement virtuel, etc.

Tableau

• ka-table - demo - Composant de table personnalisable avec tri, filtrage, regroupement, virtualisation, édition, etc.

• mantine-datatable - demo/docs - Composant de table léger pour Mantine UI applications, avec beaucoup de fonctionnalités

• material-table - demo/docs - Construit sur Material UI, plus : regroupement, données arborescentes, lignes extensibles, exportation, édition en ligne

• mui-datatables - Construit sur Material UI. Rechercher, styler, filtrer, redimensionner/cacher les colonnes, exporter, imprimer, sélectionner/développer les lignes.

• react-data-table - demo/docs - table accessible, réceptive, ajustable, clairement configurable avec tri, lignes sélectionnables, lignes extensibles, pagination

• TanStack Table - demo - Sans tête UI pour construire des tables et des datagrids puissants

• react-table-library - demo - React Bibliothèque de table — une bibliothèque de table presque sans tête — pour construire de meilleures tables.

• rsuite-table - demo/docs - Un composant de table qui prend en charge la virtualisation.

• DevExtreme React Grid - Grille de données haute performance basée sur le plugin pour Bootstrap et Material Design.

• Smart React Grid - Grille de données rapide et complète avec Material Design.

• simple-table - demo - docs - Léger, rapide et riche. Tri/filtrage, virtualisation, données arborescentes, en-têtes imbriqués, colonnes épinglées, style personnalisé, etc.

• KendoReact Grid - Composant puissant de la grille de données avec plus de 100 fonctionnalités prêtes à l’emploi comme la recherche, le tri, l’exportation vers Excel, et plus encore.

• Material-React-Table - Une présentation complète Material UI V5 mise en œuvre de TanStack React Tableau V8, écrit à partir de la base en TypeScript

Scroll infini

• @egjs/react-infinitegrid - npm - demo - Un module utilisé pour organiser les éléments de carte, y compris le contenu infiniment selon différents types de mise en page.
• react-lazyload - Chargez votre composant, votre image ou tout autre élément important.
• react-list - Un rouleau infini polyvalent React composante.
• @af-utils/virtual - demo/docs - Renvoyez de grandes listes et grilles défilantes.
• react-window - demo - React composants pour rendre efficacement les grandes listes et les données tabulaires
• virtua - demo - Un composant de liste virtuelle 0-config, rapide et petit (~3kB) pour React, Vue et solide.

Couverture

Afficher la superposition / modale / alerte / boîte à lumière / popup

• react-aria-modal - Un accès complet et flexible React modale construite selon WAI-ARIA Pratiques d’écriture.
• react-modal - Composant de dialogue modale accessible pour React.
• @paratco/async-modal - Manipulation async modale simple pour React.
• reoverlay - demo - La solution manquante pour gérer les modes.
• sweetalert2 - demo/docs - Une belle, réactive, hautement personnalisable et accessible (WAI-ARIA) remplacement pour JavaScriptLes boîtes popup. Aucune dépendance.
• sweetalert2-react-content - Enhancer officiel SweetAlert2 ajoutant le soutien pour React éléments en tant que contenu

Notification

Taster / snackbar — Prévenez l’utilisateur avec un petit popup temporaire sans mode

• react-notifications-component - demo - Composant hautement personnalisable et facile à utiliser pour les notifications.
• notistack - demo - docs - Snacks de notification hautement personnalisables (toits) qui peuvent être empilés l’un sur l’autre
• react-local-toast - demo - docs - montrer les commentaires liés à une composante particulière au lieu de toasts à l’échelle de l’application.
• react-toast - demo - docs - Notification minimale de toast.
• 🚀 react-toastify - demo - mieux vaut parier là-bas pour le moment. Soutien des crochets. Pas de réf.
• react-confirm-lite - demo - est un dialogue de confirmation léger, basé sur des promesses pour React avec intégré Tailwind CSS Soutien. Il est conçu pour être aussi simple à utiliser que react- Toastify, tout en restant entièrement personnalisable.
• reapop - A React & Redux système de notification.
• react-hot-toast - demo - Fumer des notifications chaudes pour React. Léger, personnalisable et beau par défaut.
• Sonner - Une composante de toast opinionnée pour React.

Outils

• react-tooltip - React composant tooltip.

Menu

Menus / barres latérales

• hamburger-react - demo/docs - icônes du menu hamburger animé pour React.
• react-burger-menu - Une barre latérale off-canvas avec des effets et des styles.
• react-offcanvas - Menus off-canvas pour React.
• react-planet - demo - Créer des menus circulaires qui ressemblent à des planètes.
• mantine-contextmenu - demo/docs - Contexte-menu crochet / composant pour les applications construites avec Mantine UI.

Sticky

En-têtes fixes / en-têtes déroulants / éléments collants

• react-headroom - Cachez votre en-tête jusqu’à ce que vous en ayez besoin.
• react-stickynode - Un performant et complet React collant.

Tables

• react-tabs - React composante onglets.
• react-tabtab - React- Des onglets.

Chargeur

Loaders / spinners / barre de progression — Faites savoir à l’utilisateur que quelque chose charge

• react-loader-spinner - Ensemble de collecte react- pour l’opération Async.
• react-redux-loading-bar - Barre de chargement simple pour Redux et React.
• react-spinners-css - Incroyable collection de react composants de spinners.
• react-spinners - Une collection de composants de charge pour react.
• react-content-loader - Composant SVG-Powered pour créer facilement des chargements de placeholder (comme le chargement des cartes Facebook).

Captcha

• react-simple-captcha - npm - demo - React Simple Captcha est un captcha très puissant, hautement personnalisable et facile à utiliser pour React JS.
• procaptcha - demo - docs - Protection des renseignements personnels CAPTCHA

Carrousel

• @egjs/react-flicking - npm - demo - C’est un carrousel fiable, flexible et extensible.
• react-awesome-slider - demo - Fullpage, 3D animée, 60fps médias et contenu slider/carousel.
• pure-react-carousel - Construit à partir de zéro et pas très Opinioné.
• react-id-swiper - Une bibliothèque à utiliser comme une ReactJs composante
• react-instagram-zoom-slider - demo - Un composant slider avec pince pour zoomer des fonctionnalités inspirées par Instagram.
• react-responsive-carousel - React.js Carousel réactif (avec Swipe).
• react-slick - React composant carrousel.
• keen-slider - demo - Carrousel/glisseur performant avec native Comportement tactile/swipe.
• swiper - demo - docs - Le slider mobile le plus moderne avec des transitions accélérées et incroyables native comportement.

Boutons

• react-awesome-button - demo - Boutons d’animation 3D 60fps avec progression de charge et actions de partage social.
• reactive-button - demo - docs - Un magnifique composant de bouton animé avec indicateur de progression.

Effacement

• react-accessible-accordion - Composante d’accordéon accessible pour React.
• react-collapse - Component-wrapper pour animation d’effondrement avec react- Ça va.
• react-tabbordion - demo - Universel, sémantique et CSS-seulement des composants pour créer des accordéons et des onglets.

Graphique

Afficher les données dans les graphiques / graphiques / diagrammes

• essential js 2 charts - Beaux et interactifs graphiques & graphiques pour react.
• EazyChart - demo - docs - Transformer facilement les données en graphiques significatifs
• echarts for react - Enveloppe autour de belles cartes Apache
• jscharting-react – React chart component offering a complete set of chart types and engaging data visualizations with JSCharting.
• react-chartist - React composant pour Chartist.js.
• react-charty - demo - Petites mais puissantes données interactives avec plusieurs types de cartes, animations, zoom, thème.
• react-chartjs-2 - Fréquent react composants de cartographie utilisant Chart.js 2.0.
• react-d3-components - D3 Composants pour React.
• react-google-charts - React- Cartes Google React composante.
• react-highcharts - React- Des cartes hautes.
• react-sparklines - Belle et expressive Sparklines React composante.
• react-timeseries-charts - Tableaux des chronologies déclaratives.
• react-vis - Bibliothèque de visualisation des données basée sur React et d3.
• recharts - Bibliothèque graphique redéfinie construite avec React et D3.
• rumble-charts - React composants pour la construction de cartes compactes et flexibles.
• victory - Données pour React.
• semiotic - Sémiotique est un cadre de visualisation des données pour React.
• SVAR React Gantt - demo - docs - Composant graphique Gantt personnalisable et interactif
• DevExtreme React Chart - Graphique haute performance basé sur le plugin pour Bootstrap et Material Design.
• Smart React Chart - Caractère complet Bibliothèque graphique.
• react-muze - React emballage pour muze(bibliothèque gratuite de visualisation de données pour créer des visualisations de données exploratoires dans le navigateur, en utilisant WebAssembly)
• Flowchart React - Logigramme & concepteur de logigramme pour React.js.
• react-dashboard - Tableau de bord isomorphe.

Palette des commandes

• cmdk - Menu de commande rapide, Composable, non style pour React.
• kbar - demo - Interface rapide, portable et extensible cmd+k.

Arbre

Afficher une structure de données arborescente

• json-edit-react - demo - Visualiseur et éditeur d’arborescence JSON/Object hautement configurable
• react-arborist - demo - Une vue de l’arbre complet: sans tête, virtualisé, multi-sélectionnable, glisser-n-drop, navigation du clavier, recherche
• react-complex-tree - demo - docs - Composant d’arbre accessible sans opinion avec multi-sélection, Drag-And-Drop et recherche
• he-tree-react - demo - docs - Arbre personnalisable UI, données plates, données arborescentes, drag-n-drop, placeholder pour drop, pliable, case à cocher, virtualisé.

UI Navigation

Ways pour naviguer dans les vues

• react-scroll - React composant de défilement.
• react-swipeable-views - A React Composant pour les onglets liés et les vues mobiles.

Barre de défilement personnalisée

• rc-scrollbars - demo - Barres de défilement personnalisables avec options flex et 60FPS
• react-custom-scroll - demo - Personnalisez facilement la barre de défilement du navigateur avec native Comportement de défilement OS.
• react-shadow-scroll - Composant qui personnalise l’image et insère l’ombre lors du défilement existe.

Audio / Vidéo

• react-dailymotion - Composant de lecteur Dailymotion pour React.
• react-player - A react composant pour jouer une variété d’URL, y compris YouTube.
• react-soundplayer - Créez des lecteurs SoundCloud personnalisés avec React.
• react-youtube - React.js composant de lecteur YouTube alimenté.
• video-react - Un lecteur vidéo web construit pour le monde HTML5 en utilisant React bibliothèque.
• material-ui-audio-player - Lecteur audio pour material ui design.
• react-vision-camera - Composant caméra pour React utilisant getUserMedia. Nous pouvons utiliser ce composant pour les tâches de vision d’ordinateur comme la numérisation de code-barres, la reconnaissance de texte, etc.
• react-barcode-qrcode-scanner - Code à barres et QR code composant scanner pour React. Il utilise react-vision-camera pour accéder à la caméra et Dynamsoft Barcode Reader pour lire les codes-barres.

Carte

• google-map-react - Carte universelle de Google react composant, permet le rendu react composants sur la carte Google.
• mapkit - Une bibliothèque pour intégrer Apple Maps à l’aide de MapKit JS, avec annotations, superpositions et recherche.
• pigeon-maps - demo - ReactJS Cartes sans dépendances externes.
• react-geosuggest - A React autosuggérer pour l’API de Google Maps Places.
• react-leaflet - React composants pour les cartes en feuilles.
• react-map-gl - A React wrapper pour MapboxGL-js et superposition API.
• react-svg-map - demo - Un ensemble de composants pour afficher une carte SVG interactive.

Heure / Date / Âge

Afficher l’heure / la date / l’âge

• react-timeago - Un élément de temps simple pour ReactJs.
• timeago-react - Date du format avec *** time ago déclaration. Par exemple, il y a 3 heures.
• react-google-flight-datepicker - Sélection de date de vol Google implémenté dans ReactJS.

Photo / Image

Afficher les images / photos

• lightGallery - demo - docs - Composant de galerie de lightbox complet.
• react-compare-image - demo - React composant pour comparer deux images à l’aide d’un curseur.
• react-image-gallery - Galerie d’images réactive, carrousel, slider d’images react composante.
• yet-another-react-lightbox - demo - docs - React composant de la boîte à lumière.
• react-intense - A React composant pour visionner de grandes images de près.
• react-photo-album - demo - docs - Responsive React Galerie de photos.
• react-svg-pan-zoom - A React composant qui ajoute des fonctionnalités de panoramique et de zoom à SVG.
• react-particle-image - demo - Images de rendu comme particules interactives.
• react-imgix - Ajoutez des images rapides et réactives en tant qu’image, image ou arrière-plan!
• @frameright/react-image-display-control - Définir les régions de zoom pour les images intelligentes réactives.
• zoom-image - demo - docs - Une petite bibliothèque framework agnostic pour zoomer l’image sur le web
• react-infinite-gallery – Infinite-scroll image gallery component for React apps.

Icônes

Afficher les icônes / jeu d’icônes / emojis

• iconify-react - Plus de 40k icônes à partir de 50 jeux d’icônes, y compris tous les jeux d’icônes populaires et d’emoji.
• react-icons - Svg react icônes des packs d’icônes populaires utilisant les importations ES6.
• react-open-doodles - Impressionnant illustrations gratuites comme react composants.
• react-icomoon - Avec react-icomoon vous pouvez facilement utiliser les icônes que vous avez sélectionnées ou créées dans icomoon.
• tabler-icons-react - Un ensemble de plus de 450 icônes SVG de haute qualité sous licence MIT.
• Lucide - Belle et cohérente boîte à outils d’icônes faite par la communauté. Projet open-source et une fourche d’icônes Feather.

Paginateur

Afficher un élément de contrôle pour paginer

• react-paginate - A ReactJS composant qui crée une pagination.
• react-laravel-paginex - Pagination larave avec ReactJS (personnable).
• paginated - React rendre les accessoires & crochet personnalisé pour construire la pagination.
• react-steps - Demo - Responsive React Pas de pas.

Markdown Affichage

Afficher la source de balisage analysée

• react-markdown - Rendu Markdown comme React composants.

Toile

Entrée Sketch en utilisant Canvas ou SVG

• react-konva - React Konva est un JavaScript bibliothèque pour dessiner des graphiques de toile complexes avec des fixations au cadre Konva.
• react-sketch - Un outil Sketch pour React applications basées, soutenues par FabricJS
• react-sketch-canvas - Demo Outil de dessin vectoriel à main libre pour React utilisant SVG comme toile. Accepte les données de la souris, du toucher et des tablettes graphiques
• react-heat-map - Un calendrier léger thermomap react composant construit sur SVG, version personnalisable de GitHubLe graphique de contribution.

Capture d’écran

• html2canvas - Prendre des captures d’écran de n’importe quelle partie de votre page Web en utilisant Javascript.

Divers

• puck - demo - L’éditeur visuel auto-organisé pour React
• react-advanced-news-ticker - demo - Un composant flexible et animé de nouvelles verticales
• react-avatar-generator - Permet aux utilisateurs de créer des kaléidoscopes aléatoires à utiliser comme avatars.
• react-awesome-query-builder - demo - Constructeur de requêtes visuelles à partir de champs de formulaire, avec exportation SQL, MongoDB et JSON
• react-blur - React composant pour les fonds flous.
• react-demo-tab - demo - A React composant pour créer facilement des démos d’autres composants.
• fastcomments-react - demo - FastComments composant pour intégrer un fil de commentaire en direct sur une page ou un SPA.
• react-pdf-viewer - docs - A React composant pour voir une PDF document.
• react-simple-chatbot - demo - Un simple composant de chatbot pour créer des conversations.
• react-file-reader-input - Composant d’entrée de fichier pour le contrôle pour le style de lecture de fichier et l’abstraction.
• react-filter-control - Les React composant de fabricant de filtre pour construire les critères de filtre dans le UI.
• react-headings - Incrément automatique de votre HTML rubriques (h1, h2, etc.) pour améliorer l’accessibilité et le référencement, peu importe la structure de votre composant, pendant que vous gardez le contrôle total de ce qui est rendu.
• react-joyride - Créez des parcours et des visites guidées pour votre ReactJS les applications. Maintenant avec des tooltips autonomes!.
• react-mouse-select - Demo Un composant qui permet de sélectionner DOM éléments en déplaçant la souris
• react-resizable-and-movable - Composant redimensionnable et mobile pour React.
• react-resizable-box - Composant redimensionnable pour React. #reactjs.
• react-searchbox-awesome - demo - Boîte de recherche minimaliste.
• react-split-pane - React Composant à double face.
• react-swipe-to-delete-ios - demo - Pour supprimer un élément dans une liste comme iOS.
• react-swipeable-list - demo - Composant configurable pour rendre la liste avec des éléments mobiles.
• typography - Une puissante boîte à outils pour construire des sites Web avec une belle typographie.
• react-pulse-text - demo/docs - Vous permet d’animer le texte de toute propriété d’un autre composant.
• captcha-image - Permet de générer une image captcha aléatoire avec des options.
• react-pdf - Afficher les PDF dans votre React app aussi facilement que s’ils étaient des images.
• react-customizable-chat-bot - Demo - Construisez votre propre chatbot correspondant aux besoins de votre marque en quelques minutes.
• @restpace/schema-form - Demo - Construire facilement des formes complexes automatiquement à partir d’un schéma JSON.
• react-darkreader - A React Crochet pour ajouter un mode noir / nuit à votre site inspiré par darkreader.
• react-apple-signin-auth - Signine de pomme pour React utilisant le SDK officiel Apple JS.
• react-mrz-scanner - A React composant pour scanner la ZMR sur les passeports, les cartes de visa, etc. Il est basé sur Dynamsoft Label Recognator.

Composants du formulaire

Laissez l’utilisateur saisir des données

Date / Sélection du temps

Choix de date / choix d’heure / choix d’heure / choix d’échelle de date

• date-range-picker - demo - Un composant de calendrier qui prend en charge les choix de dates, de plages et de gammes.
• react-big-calendar - Composant de calendrier Gcal/outlook.
• react-datepicker - Un composant datapicker simple et réutilisable pour React.
• react-day-picker - Sélection de date flexible pour React.
• react-flatpickr - Flatpickr pour React.
• react-simple-timefield - demo - Champ d’entrée de temps simple.
• react-timezone-select - demo - Dynamique, sélection du fuseau horaire succinct. Sur la base react-select.
• DevExtreme React Scheduler - Planificateur/calendrier haute performance pour Material Design.
• jQWidgets Scheduler - Caractéristique complète bibliothèque Scheduling.
• react-calendar - Calendrier ultime pour votre React Annexe
• react-date-picker - Un choix de dates pour votre React Annexe
• schedule-x - Material design le calendrier de l’événement et les composants de sélection de date. Site de démonstration : https://schedule-x.dev/

Picker Emoji

• interweave-emoji-picker - A React base emoji picker propulsé par Interweave et Emojibase.

Types d’entrée

Inputs masqués, inputs spécialisés; courriel / numéro de téléphone / carte de crédit / etc.

• react-credit-cards - Belles cartes de crédit pour vos formulaires de paiement.
• react-payment-inputs - demo - Un conteneur à dépendance zéro pour aider avec les champs d’entrée de carte de paiement.
• react-input-mask - demo - Encore un autre react composant pour le masque d’entrée.
• @lunasec/react-sdk - docs - Composants sécurisés et durcis qui chiffrent/tokenisent automatiquement toutes les données.
• react-numpad - demo - Contrôle des nombres, des dates et des heures.
• react-multi-email - demo - Formater plusieurs courriels comme types d’utilisateurs.

Autocomplet

Autosuggest / autocomplet / typeahead

• react-autosuggest - WAI-ARIA conforme React Autosuggérer un composant.
• react-typeahead - Pure react- à base de typeahead et typeahead-tokenizer.

Sélectionner

• react-aria-menubutton - Un entièrement accessible, facilement thématique, React- Bouton de menu motorisé.
• react-functional-select - demo - Composant de sélection micro et micro-optimisé pour React.js.
• react-mobile-picker - demo - Un composant iOS comme select box.
• react-select - Un contrôle Select construit avec et pour React JS.
• react-column-select - Un composant de sélection de colonne construit pour react.
• react-select-search - demo - Un composant de sélection léger pour React

Cueillette de couleurs

• coloreact - Un petit sélectionneur de couleurs pour React.
• react-color - Est un petit composant de widget de sélection de couleur pour React les applications.
• react-colorful - Un petit (2,5 KB), sans dépendance, rapide et accessible composant de sélection de couleurs.
• react-input-color - React composant de couleur d’entrée avec sélectionneur de couleur hsv.

Basculer

• @anatoliygatt/heart-switch - demo - Un élément de bascule en forme de cœur entièrement à thème et accessible.
• react-ios-switch - React interrupteur.
• react-toggle - Un élégant composant toggle accessible pour React. Aussi une case à cocher glorifiée.
• ui-switch - Le composant Toggle le plus complet

Slider

• react-slider - Composant slider pour React.

Bouton radio

• react-radio-group - De meilleurs boutons radio.

Type Sélectionner

Laissez l’utilisateur sélectionner quelque chose (par exemple une balise) en tapant

• react-autocomplete-input - Champ d’entrée automatique pour React.
• react-mentions - Mentionnez les gens dans une zone de texte.
• rich-textarea - Une zone de texte pour coloriser, mettre en valeur, décorer des textes et offrir autocomplet.

Entrée de l’étiquette

Laissez l’utilisateur ajouter plusieurs balises en une seule entrée

• react-tag-input - Un composant de marquage fantastiquement simple pour votre React projets.
• react-tagsinput - Une simple react composant pour entrer les étiquettes.
• react-tokeninput - Composant tokeninput pour React.
• tagify - demo & docs - Composant d’entrée des étiquettes léger et efficace.

Entrée automatique / zone de texte

• react-input-autosize - Champ d’entrée de redimensionnement automatique pour React.
• react-autowidth-input - Champ d’entrée de taille automatique hautement configurable et extensible construit avec des crochets.
• react-textarea-autosize - Composante <textarea /> pour React qui se développe avec du contenu.

Catégorie

• react-rating - demo - Dépendance zéro, composant de notation hautement personnalisable.
• react-awesome-stars-rating - demo - La composante étoiles avec accessibilité.
• react-star-rating-input - React.js composant pour entrer 0-5 (ou plus) étoiles.

Faites glisser et déposez

• react-beautiful-dnd - Belle et accessible glisser-déposer pour les listes avec React
• react-dnd - Faites glisser et déposez pour React.
• react-drag-sizing - “Drag pour redimensionner” (dimensionnement) comme React Composante.
• react-draggable - React composant dragable.
• react-dragula - Faites glisser et laissez tomber si simple que ça fait mal.
• react-dropzone - Simple zone de glisser-déposer HTML5 avec React.js.
• react-movable - Bibliothèque accessible et minimaliste (<4kB gzipped) pour glisser et déposer verticalement dans les listes et les tables.
• react-sortable-pane - Composant de vitre triable et redimensionnable pour React.
• neodrag - Bibliothèques multi-cadres pour traîner. Choisissez votre cadre, le comportement de l’API de glisser restera le même.

Liste triable

Laissez l’utilisateur définir un ordre sur une liste

• react-anything-sortable - Triez tous les enfants avec support tactile et compatibilité IE8.
• sortablejs - Listes réordonnées par glisser-déposer, à l’intérieur et entre les listes.

Éditeur de texte riche

• alloyeditor - WYSIWYG éditeur basé sur CKEditor avec entièrement réécrit UI.
• ckeditor4-react - Un emballage officiel CKEditor 4 riche éditeur de texte.
• ckeditor5-react - Un emballage officiel CKEditor 5 riche éditeur de texte.
• draft-js - A React cadre pour la construction des éditeurs de texte.
• edtr-io - demo - docs - WYSIWYG éditeur web en ligne avec plugins.
• megadraft - Éditeur de texte riche construit sur brouillon.js.
• react-ace - Ace (Avancé Code Rédacteur en chef).
• react-codemirror - demo - Composant CodeMirror pour React.
• react-contenteditable - React composant pour un div avec contenu modifiable.
• react-draft-wysiwyg - WYSIWYG éditer construire sur le dessus de DraftJS.
• react-editor - Simple éditeur de texte riche qui peut insérer des images et HTML.
• react-medium-editor - Enveloppe d’édition moyenne.
• react-monacoeditor - Composant éditeur de Monaco React.
• react-simple-code-editor - Simple sans fissuration code éditeur avec mise en évidence syntaxique
• react-quill - Coussin d’emballage.
• react-trumbowyg - Trumbowyg Enveloppe.
• remirror - demo - docs - Boîte à outils ProseMirror pour React.
• slate - demo - docs - Un cadre entièrement personnalisable pour construire des éditeurs de texte riches.
• smartblock - demo - docs - Éditeur WYSIWYG basé sur ProseMirror.
• tiptap - demo - docs - Le cadre d’éditeur sans tête pour les artisans du web.

Markdown Éditeur

• react-simplemde-editor - React enveloppe de composants pour EasyMDE (the most fresh SimpleMDE fork).
• react-markdown-editor - A markdown éditeur utilisant React/Réflux.
• react-md-editor - Une simple markdown éditeur avec prévisualisation, implémenté avec React.js et TypeScript.

Édition de l’image

Manipulation d’images

• react-avatar-editor - Component d’image Facebook, avatar / profil.
• react-avatar-generator - Générer un kaléidoscope amusant pour les avatars utilisateurs.
• react-easy-crop - Composant pour crop/rotation des images/vidéos avec des interactions faciles. Toucher amical.
• react-image-crop - Un outil de recadrage d’image réactif pour React.
• react-image-cropper - Cropper d’image.
• react-advanced-cropper - A react cropper bibliothèque pour créer le cropper exactement adapté pour votre site Web design.
• react-mobile-cropper - Une bibliothèque de recadrage d’image prête à l’emploi, fortement inspirée par les populaires croppers Android. Sur la base react-advanced-cropper.

Recouvrement des composantes du formulaire

• formsy-material-ui - Un emballage de compatibilité Formy pour Material UI forme des composants.
• formsy-react-components - Une série de React Composants JS destinés à être utilisésreact formulaire.
• react-input-enhancements - Ensemble d’améliorations pour le contrôle d’entrée.
• react-widgets - Un ensemble à la carte d’entrées polies, extensibles et accessibles.

Divers

• @anatoliygatt/numeric-stepper - demo - Une composante de stepper numérique entièrement thématique et accessible.
• interweave - React bibliothèque à rendre en toute sécurité HTML, attributs de filtre, autowrap texte avec les correspondants, rendre les caractères emoji, et beaucoup plus.
• react-designer - Facile à configurer, léger, vectoriel modifiable graphiques dans votre react composants.
• react-upload-gallery - React pour télécharger la galerie d’images. Faites glisser et déposez, triez, personnalisez.

Syntaxe mise en évidence

• react-syntax-highlighter - Composant syntax avec Prismjs ou Highlightjs AST utilisant des styles en ligne.

UI Mise en page

Back to top ⬆️

Composants pour mettre en page l’interface utilisateur de l’application

• autoresponsive-react - Librairie de mise en page automatique du réseau.
• hedron - Un système de grille flexbox sans fissures, alimenté par des composants de style.
• m-react-splitters - Composant diviseur, écrit en TypeScript.
• muuri-react - demo - docs - Mises en page réceptives, triables, filtrables et dragables.
• react-grid-layout - Une disposition de grille dragable et redimensionnable avec des points d’arrêt réactifs, pour React.
• react-layman - demo - Gestionnaire de mise en page dynamique avec onglets
• react-masonry-component - Enveloppe pour la maçonnerie de @desandro.
• react-reflex - Composant de conteneur de disposition flexible pour avancé React applications Web.
• react-spaces - demo/docs - Composants nidables ancrés, redimensionnables, défilants.
• react-stonecutter - Composante de mise en page animée de la grille.
• react-colrow - Composants de disposition de grilles réactives. Sur la base css flexbox. Prise en charge de la largeur de la fraction, croissance automatique.
• react-schematic - demo - Construisez des mises en page réactives en utilisant des schémas de style sans dépasser aucune configuration de thème

UI Animation

Back to top ⬆️

Animer les transitions

• data-driven-motion - Animez facilement vos données.
• react-animatable - Une bibliothèque d’animation utilisant l’API Web Animations.
• react-anime - Une bibliothèque d’animation super facile.
• react-flip-move - animation sans effort entre DOM les modifications (p. ex. la réorganisation de la liste) en utilisant la technique FLIP.
• react-gsap-enhancer - Utiliser toute la puissance de React et GSAP ensemble.
• react-tsparticles - Un composant léger pour créer facilement des animations de particules interactives
• react-motion - Une source qui résout vos problèmes d’animation.
• react-mt-svg-lines - Enrouleur pour animer la course en SVG.
• react-router-transition - Transitions construites pour react-routeur, alimenté par react- Ça va.
• react-spring - Une bibliothèque d’animation basée sur la physique du printemps.
• react-ts-typewriter - demo - Facile à utiliser et effet machine à écrire personnalisable pour tout texte.
• framer-motion - Une bibliothèque d’animation et de geste.
• react-spark-scroll - Actions et animations basées sur le défilement pour react.
• react-track - Suivre la position de DOM éléments. Créez des animations cool.
• react-transitive-number - Appliquez l’effet de transition aux chaînes numériques, une la old Groupon timers.
• react-web-animation - React composants pour l’API Web Animations -.
• auto-size-transition - Une composante qui s’échelle dynamiquement en fonction de la taille interne des enfants
• react-particles-bg - Des particules.
• gooey-react - demo/docs - L’effet gooy pour React, utilisé pour la forme blobbing / métaballes.
• react-voodoo - demo/samples - Moteur d’animation additive permettant des animations complexes comme des androïdes/iOs, le rendu des curseurs sur SSR, l’inertie prédictive, multitouch, etc

Parallaxe

• simple-parallax-js - demo - La meilleure façon d’obtenir un effet parallax avec React et JavaScript sur les images
• react-parallax-tilt - demo - Appliquer facilement l’effet de vol stationnaire parallaxe sur les composants.

UI Cadres

Back to top ⬆️

Réceptif

Set de composants + système de mise en page responsive

• ant-design - demo/docs - A UI Design Langue chinoise. Individuel components disponible.
• atlaskit - Le fonctionnaire d’Atlassian UI bibliothèque, avec composants de badge à tree table .
• base web - Base Web est une base pour lancer, développer et unifier des produits Web.
• carbon - demo/docs - A design système construit par IBM.
• cdbreact - demo - docs - Élégant UI Kit bibliothèque et composants réutilisables pour construire mobile-premier, sites Web réactifs et applications Web.
• chakra-ui - demo/docs - Simple, modulaire et accessible UI Composants pour votre React Demandes.
• ChatUI - demo/docs - Les UI design langue et React bibliothèque pour Conversational UI
• CoreUI for React - demo/docs - Source ouverte UI bibliothèque de composants.
• evergreen - demo/docs - Evergreen React UI Cadre par segment.
• fluentui - Cadres UX pour créer de belles applications multiplateformes qui partagent code, design, et comportement d’interaction.
• gestalt - demo/docs - Un ensemble de composants qui supporte Pinterests design langue.
• grommet - Le cadre UX le plus avancé pour les applications d’entreprise.
• kokonut-ui - Gratuit Moderne et personnalisable UI composants.
• Mantine - demo/docs - Une bibliothèque entièrement équipée avec 100 crochets et composants avec native soutien thème sombre
• orbit - Composantes pour la construction de projets axés sur les voyages.
• flowbite-react - Source ouverte UI bibliothèque de composants basée sur React, Tailwind CSSEt Flowbite.
• primereact - Une version complète UI Cadre avec plus de 50 composants material, bootstrap et des thèmes personnalisés.
• radix-ui - Composants sans style et accessibles pour la construction de haute qualité design systèmes et applications web.
• react-bootstrap - Bootstrap composants construits avec React.
• react-foundation - Fondation React composants.
• reakit - demo/docs Toolkit pour construire des applications Web riches et accessibles
• searchkit - React UI composants / widgets. La meilleure façon de construire une grande expérience de recherche avec Elasticsearch.
• semantic-ui-react - La sémantique officielle…UI-React l’intégration.
• semi-design - demo/docs - Un moderne, complet, flexible design système.
• shadcn/ui - demo - docs - Composants magnifiquement conçus que vous pouvez copier et coller dans vos applications.
• shineout - demo - Ensemble de composants adaptés aux Chinois : éléments de forme, navigation, table, arbre, arbre, sélection d’arborescence, etc.
• Tremor - demo - docs - Composants open-source pour construire des graphiques et des tableaux de bord.
• untitled-ui-react - demo - Belle collection de composants construits avec React Aria et Tailwind CSS.

Material Design

• 🚀 Material UI - Ensemble complet de composants. Construisez votre propre design ou commencer par Material Design.
  • Autocomplete - Autocomplet accessible, combobox, multisélection
  • Material Icons - 1 000 + SVG material les icônes.
  • Modal - Composant de dialogue modale accessible.
  • Slider - Composant coulissant accessible.
  • Table - table avec tri, sélection, pagination, virtualisation.
  • Tree View - Composant de vue arborescente accessible pour React.
• react-essence - Essence - L’essentiel Material Design Cadre.
• react-materialize - Material design pour react, alimenté par matérialistes.
• react-toolbox - Une série de React composants mettant en œuvre Google Material Design.
• mdbootstrap - React Bootstrap avec Material Design

Mobile

• antd-mobile - Mobile configurable UI de Chine.
• Ionic React - Cadre ionique: construire facilement Android, Bureau et applications Web progressives avec une code base.
• OnsenUI - demo/docs - Cadre d’application mobile avec Material et à plat (iOS). Basé sur les composants Web.

Recouvrement des composantes

• blueprint - demo - docs - UI boîte à outils pour construire des interfaces Web complexes et denses pour les applications de bureau (pas mobiles).
• dataminr-react-components - Collecte de données réutilisables React Composants et fonctions d’utilité.
• shards-react - docs/demo - Une belle et moderne React design système. Le freemium.
• aframe-react - Construire des expériences de réalité virtuelle avec A-Frame et React.
• react-admin - Créez des expériences utilisateur admin en plus des services REST et GraphQL.
• refine - demo - docs - Construisez rapidement des applications à forte intensité de données. Il est livré avec Ant Design Système, un niveau d’entreprise UI Une boîte à outils.
• matrix-card - demo - Composant le plus simple possible pour générer des cartes de style de pluie matrice.
• rsuite - demo/docs - Suite de composants pour “produits du système d’entreprise”.
• lens-ui - docs - Une combinaison de composants axée sur la simplicité.
• Tailwindadmin - docs - Une collection de ShadCN ready-made UI composants que vous pouvez brancher directement dans votre React/Next.js projets.

UI Services publics

Back to top ⬆️

Reporter

Rapporter les styles calculés

Rapporteur de visibilité

Signaler lorsqu’un composant devient visible/caché

• react-intersection-observer - React mise en œuvre de l’API d’observateur intersection.
• react-visibility-sensor - Composant capteur.
• react-waypoint - A React composant pour exécuter une fonction chaque fois que vous défilez vers un élément.

Rapporteur de mesure

Déterminer et rapporter les mesures d’un élément

• react-component-queries - Fournissez des accessoires à vos Composants en fonction de leur Largeur et/ou Hauteur.
• react-container-dimensions - Composant Wrapper qui détecte la redimensionnement de l’élément.
• react-dimensions - React composant d’ordre supérieur pour obtenir les dimensions du conteneur.
• react-height - Component-wrapper pour déterminer et signaler la hauteur des éléments enfants.
• react-measure - Calcul des mesures d’un React composante.
• react-sizeme - Faites votre React Composants conscients de leur largeur et de leur hauteur.

Entrée du périphérique

Turner l’entrée de l’utilisateur dans les actions

Événements clavier

• react-hotkeys - Gestion de la clé de frappe et du domaine d’intervention React.
• react-key-handler - React composant pour gérer les événements clavier.
• react-keydown - Enveloppe de clé légère pour React composants.
• react-shortcuts - Gérer les raccourcis clavier à partir d’un seul endroit.
• useKeyCapture - Un crochet personnalisé pour faciliter l’écoute d’une cible/globale.
• react-keyboard-navigator - Une suite de React composants et crochet pour sélectionner les composants de la soeur à travers le clavier.

Faire défiler les événements

• react-scroll-components - Un ensemble de composants qui react à faire défiler la page.

Touchez Swipe

• react-swipe - Swipe.js comme un React composante.

Événements de la souris

• react-hook-mighty-mouse - demo - Crochet qui suit les événements de la souris sur l’élément sélectionné.

Meta Tags

Fixer des balises méta,

• react-helmet-async - Casque sans fil pour React 16+ et amis
• react-helmet - Un responsable de document pour React.

Portail

Rendre un élément à un arbitraire DOM noeud

• react-layer-stack - Système de superposition simple mais omniprésent et agnostique pour React.
• react-portal - React composante pour le transport des modals, boîtes à lumière, barres de chargement… vers document.body.

Tester le comportement de l’utilisateur

A/B tests, expériences, …

• react-experiments - React les éléments de mise en œuvre UI des expériences.

Code Design

Back to top ⬆️

Bibliothèques qui aident avec code conception

Magasin de données

Flux de données / Gestion de données / Stockages de données / État des composants / Flux de données

• baobab-react - React intégration pour Baobab.
• cerebral - Un contrôleur d’État avec son propre débogueur.
• effector-react - React des liens pour effector, un gestionnaire d’état multi-store efficace.
• fireproof - demo - docs Pure JS, aucune dépendance, base de données CRDT - fonctionne dans le navigateur et se connecte à tout cloud ou backend
• RxDB - demo - docs Une première base de données rapide, locale, réactive pour JavaScript Demandes
• fluxible - Un conteneur rechargeable pour les applications de flux universel.
• kea - Architecture de haut niveau pour React les applications.
• react-i13n - Une approche performante, évolutive et rechargeable pour instrumenter votre React demande.
• react-redux - Fonctionnaires React fixations pour Redux.
• redux-batched-actions - Réducteur + action pour réduire les actions sous une seule notification d’abonné.
• redux - Conteneur à état prévisible pour JavaScript les applications.
• reselect - Bibliothèque de sélection pour Redux.
• resourcerer - Cadre déclaratif de saisie des données pour les API REST
• synergies - docs Une bibliothèque de contexte-état performante et distribuée pour créer réutilisable React la logique d’état en synchronisant des morceaux de contexte atomar.
• zustand - docs - Une solution de gestion d’état des os d’ours rapides utilisant des principes de flux simplifiés et un crochet sans plaque de chaudière api.
• teaful - Petit, facile et puissant React gestion de l’État

Logique du formulaire

• data-driven-forms - Un moyen déclaratif pour construire des formulaires avec toutes les fonctionnalités.
• formik - Construire des formes sans larmes et soutient Validation en toute simplicité.
• formsy-react - Un constructeur d’entrées de formulaire et un validateur pour React JS.
• Phormal - Docs & Demos - Formes réactives et multilingues avec validation intégrée, support pour le mode sombre et les langues de droite à gauche.
• react-hook-form - React des crochets pour la validation de formulaire sans le tracas.
• react-jsonschema-form - A React composant pour la construction de formulaires Web de JSONSchema.
• react-client-validation - Validation simple et super légère pour React.
• react-final-form - Gestion de l’État par abonnement
• react-formawesome - Bibliothèque complexe pour créer des formes impressionnantes.
• surveyjs - La bibliothèque avancée des enquêtes et des formulaires
• Formily - Haute performance, extensible, et Typescript amical
• hook-form-react - docs - Une solution légère et sans dépendance React crochets pour la validation du formulaire.

Routeur

• react-router-component - Composant routeur déclaratif pour React.
• react-router-scroll - React Gestion du défilement du routeur.
• react-router - Une bibliothèque de routage complète pour React.
• redux-first-history - Redux Première histoire - Redux soutien de liaison historique react-routeur - @reach/routeur - wuter
• universal-router - Un simple routeur de style intergiciel pour isomorphe JavaScript applications web.
• wouter - Une bibliothèque de routage minimaliste ~1.3Ko. Rien d’autre que des crochets.
• tanstack-router - Routeur à sécurité de type avec cache intégré & URL gestion de l’État

Props depuis le serveur

Propriétés des composants asynchrones récupérées sur le réseau

• react-refetch - Une façon simple, déclarative et Composable de récupérer des données pour React composants.
• redux-connect - Fournit décorateur pour résoudre les accessoires async dans react- Routeur.
• axios-react - Composant client HTTP pour React.

Communication avec le serveur

• apollo-client - Un simple client de cache pour n’importe quel serveur GraphQL et UI cadre.
• react-relay - Le relais est un JavaScript cadre pour la mise en place React les demandes.
• query - docs Gestion d’état asynchrone puissante, utilitaires serveur-état et récupération de données pour TS/JS, React, Solide, Svelte et Vue.

CSS / Style

• aesthetic - Un puissant agnostique de type sûr, CSS-en-JS bibliothèque pour les composants de style, qu’il s’agisse d’objets simples, d’importation de feuilles de style, ou simplement de référencement de noms de classe externes.
• aphrodite - Il’s styles en ligne, mais ils fonctionnent!.
• inline-style-prefixer - Autopréfixeur temps d’exécution pour les objets de style en ligne.
• @classmatejs/react - Un constructeur de composants centré sur le nom de classe avec une syntaxe comme les composants style et le sucre des variantes de cva.
• react-container-query - Composant modulaire réactif.
• react-responsive - Questions des médias react pour répondre design.
• reactponsive - Composants et crochets réactifs.
• styled-components - Les primitifs visuels pour l’âge des composants.
• stitches - CSS-en-JS avec presque zéro runtime, SSR, support multivariant.

HTML Modèle

• jsx-control-statements - Neater Si et pour React JSX.

Applications isomorphes

• hypernova - Un service de rendu côté serveur JavaScript vue.
• isomorphic-style-loader - Isomorphique CSS chargeur de style pour Webpack.
• react-server - React framework avec rendu serveur pour la charge rapide des pages.
• rill - Cadre d’application web universel.
• webpack-isomorphic-tools - Le rendu côté serveur pour vos applications Webpack (p. ex. React).

Chaudière

Scaffold / kit de démarrage / Générateur Yeoman / ensemble de piles / seed

• create-react-app - Créer React applications sans configuration de construction.
• crisp-react - Intégration rapide dans TypeScript avec le soutien de multiples SPA et l’évitement des pièges.
• cra-template-redux-auth-starter - A Redux la plaque de démarrage pour CRA.
• electron-react-boilerplate - Développement d’édition en direct sur l’application de bureau.
• elegant - docs - demo - Une simple React cadre pour construire rapidement de belles et expressives applications web avec Next.js, Tailwind CSSet Markdown chargement.
• extensive-react-boilerplate - Plaque de chaudière Next.js, Auth (S’inscrire, S’inscrire, Réinitialiser le mot de passe, Confirmer l’e-mail, Refresh Token), Material UI, React Forme de crochet, I18N, Téléchargement de fichiers (support des pilotes locaux et Amazon S3), Tests, CI.
• generator-starhackit - Kit de démarrage complet.
• nwb - Outil CLI et devDependency pour React composants d’applications & et modules npm.
• nx - Système de construction de nouvelle génération avec support monorepo de première classe et intégrations puissantes.
• PBandJ - Cadre des composants réutilisables Zero-Config.
• react-hot-boilerplate - Plaque de chaudière minimale pour votre prochaine ReactJS Projet.
• rockpack - Solution simple pour créer React application avec SSR, regroupement, lintage, test dans les 5 minutes.
• create-react-dependency - Créer react dépendances sans configuration de construction.
• phoenix - Une simple plaque de chaudière qui vous aide à faire votre react application avec support de rendu et de localisation côté serveur.
• react-enterprise-starter-kit - Très scalable et performant React Kit de démarrage pour une application d’entreprise avec une base de code très facile à entretenir.
• Tailwindadmin - Modèle de tableau de bord Shadcn construit gratuitement React et Tailwind CSS est livré avec support multi-cadre

Divers

• react-inlinesvg - Un composant de chargeur SVG pour ReactJS.
• react-godfather - Une nouvelle façon d’écrire des composants fonctionnels, sans crochet.
• react-vvm - Une nouvelle approche du MVVM React, afin d’assurer une séparation nette des préoccupations, de réduire la plaque de chaudière et d’optimiser automatiquement la re-rendement pour les scalables UI logique.
• react-call - Appelez votre React composants.
• redux-auth-patch - Système d’authentification token complet pour react + redux qui supporte le rendu isomorphe.
• redux-search - Redux des liens pour la recherche côté client.
• tcomb-react - Syntaxe alternative pour PropTypes.
• react-universal-hooks - :tada: soutien react hameçons partout (composante fonctionnelle ou de classe).

Services publics

Back to top ⬆️

• qrcode.react - Composante A <QRCode/> pour utilisation avec React.
• <qr-code> – A no-dependencies, customizable, animate-able, SVG-based <qr-code> element.
• react-children-utilities - Outils étendus pour ReactLes enfants.
• react-media - A CSS composant de requête multimédia pour React.
• react-middle-ellipsis - demo - Tranchez de longues cordes au milieu au lieu de la fin.
• react-translate-component - Contenu textuel multilingue/localisé.

i18n

Internationalisation / L10n / localisation / traduction

• react-i18next - Internationalisation pour react C’est bien. Utilisation du i18next i18n l’écosystème.
• react-intl - Internationaliser React les applications.
• react-localized - Internationalisation pour React composants basés sur gettext modèle.
• react-translate-maker - Internationalisation universelle (i18n) bibliothèque open source pour React.
• react-intl-universal - demo Internationaliser React les applications. Pas seulement pour React.Component mais aussi pour Vanilla JS.
• @tolgee/react - docs – outil de localisation Web permettant aux utilisateurs de traduire directement React app qu’ils développent
• js-lingui - docs – Une internationalisation lisible, automatisée et optimisée (5 kb) pour JavaScript.

Fixations-cadres / intégrations

• backbone-react-component - Un peu de colle qui branche automatiquement vos modèles Backbone.
• elm-react-component - A React composant qui enveloppe un module Elm à utiliser dans un React demande.
• gl-react - Liens OpenGL / WebGL pour React mettre en œuvre des effets complexes sur les images et le contenu.
• react-backbone - Mélangeurs à os pour react Et bien plus encore.
• react-d3-library - Bibliothèque open source pour utiliser D3 dans React.
• react-elm-components - Écrire React composants en Elm.
• react-famous - React pont vers Famo.us.
• react-localstorage - Mise en oeuvre simple de stockage local composé pour Facebook’ React.
• react-lottie-player - demo - Joueur d’animation de lotie.
• react-on-rails - Intégration des React + Webpack + Rails pour construire des applications universelles (isomorphes).
• react-three-renderer - Rendu dans une toile de trois.js en utilisant React.
• react-threejs - Les liaisons les plus simples entre React & Trois.js
• reactfire - ReactJS mixin pour une intégration facile Firebase.
• reactive-elements - Permet d’utiliser React.js composant comme HTML élément (composante web).
• react-unity-webgl - Intergration d’unité avec communication bidirectionnelle avec un système d’événements intégré.

Intégrations avec des services tiers

• react-ga - React Module Google Analytics.
• react-google-analytics - Composant d’analyse Google.
• react-google-autocomplete - Google Place les composants et les crochets de l’API.
• react-recaptcha - A react.js reCAPTCHA pour Google.
• react-stripe-checkout - Charger stripe’s checkout.js comme un react composante. Mode d’utilisation le plus facile avec React.
• redux-segment - Intégration de segment.io analytique pour redux.
• react-slack-notification - Envoyez directement des messages et des journaux d’erreurs sur un canal Slack.
• react-firebase-hooks - Crochets pour intégrer la base de feu dans votre application.

Rendement

Back to top ⬆️

UI

• inferno - Un très rapide, React- comme JavaScript bibliothèque pour construire des interfaces utilisateur modernes.
• react-fastclick - Événements Fast Touch pour React.
• react-static-container - Render le contenu statique efficacement.

Inspecter

• react-perf-tool - Déboguez la performance de votre React demande.
• react-render-visualizer - Visualiseur de rendu pour ReactJS.

Charge paresseuse

• react-infinite-grid - A React composant qui rend une grille d’éléments.
• react-infinite - Un conteneur de défilement efficace basé sur UITableView.
• react-lazy-load - React composant qui rend les éléments d’enfant lorsqu’ils entrent dans le viewport.
• react-lazyload - Chargez votre composant, image ou tout ce qui importe la performance.
• react-virtualized - React composants pour rendre efficacement les grandes listes et les données tabulaires.

Taille de l’application

• babel-plugin-transform-react-remove-prop-types - Supprimer inutile React propTypes.
• react-lite - Une mise en œuvre React qui optimise pour une petite taille de script.

Rendu à l’aide du serveur

• iSSR - La façon la plus facile de déplacer votre React application sur le rendu à l’aide du serveur. Gérez les effets secondaires et synchronise l’état.
• react-esi - Une bibliothèque pour augmenter les performances de SSR en exposant React composants en tant que fragments Edge Side Inclut (ESI)

Outils Dev

Back to top ⬆️

Essai

• enzyme - JavaScript Essais des services publics React.
• jest-cli - Sans douleur JavaScript Essais.
• react-unit - Librairie d’essais unitaires légers pour ReactJS.
• redux-test-recorder - A redux intergiciel pour générer automatiquement des tests pour les réducteurs à travers ui l’interaction.
• rut - React testing rendu facile avec react-test-renderer. Soutiens DOM et des rendus personnalisés.
• unexpected-react - Plugin pour imprévu pour permettre de tester la totalité React virtuel DOM, et aussi le renduur peu profond.
• playwright enables reliable end-to-end testing for modern web apps.

Redux

• redux-devtools-chart-monitor - Un moniteur graphique pour Redux DevTools.
• redux-devtools-dock-monitor - Un quai redimensionnable et mobile pour Redux Moniteurs DevTools.
• redux-devtools-filterable-log-monitor - Moniteur de vue arborescente filtrable pour Redux DevTools.
• redux-devtools-inspector - Un autre Redux DevTools Monitor.
• redux-devtools-log-monitor - Le moniteur par défaut pour Redux DevTools avec vue sur l’arbre.
• redux-devtools - DevTools pour Redux avec rechargement à chaud, replay d’action et personnalisable UI.
• remote-redux-devtools - Redux DevTools à distance.

Inspecter

• fluxguard - Surveillance du changement PROD qui met en évidence tout DOM + design changements.
• react-inspector - Puissance du navigateur DevTools inspecteurs à l’intérieur de votre React Annexe
• reactotron - Une application CLI et OS X pour React JS et React Native les applications.
• Tail Lens - Tailwind éditeur dans le navigateur : Inspecter, éditer, prévisualiser, copier.

Divers

• component-controls - demo - docs - Un outil de nouvelle génération pour créer des sites de documentation rapides.
• cosmos-js - Outil DX pour la conception vraiment encapsulé React composants.
• react-demo-tab-cli - Outil CLI pour créer des démos de react composants.
• react-styleguidist - React générateur de guide de style.
• standard-react - JavaScript Guide de style standard.
• Plasmic - Puissant design outil pour construire votre React composants visuellement.
• SimpleLocalize - Outil CLI open source pour trouver i18n clés en React projets.
• react-device-frameset - React composant de cadre de dispositif.

Divers

Back to top ⬆️

• DataFormsJS JSX Loader - Petites JavaScript Compilateur pour convertir rapidement JSX en JS directement sur une page Web.
• html-to-react-components - Extrait des parties annotées HTML dans React composants en tant que modules séparés.
• htmltojsx - AJAXify automatiquement HTML avec la puissance de React. C’est…
• jsonx - React JSON Syntaxe.
• mozaik - Mozaïk est un outil basé sur nodejs / react / d3 / stylet pour créer facilement de beaux tableaux de bord.
• react-blessed - A react rendu pour béni.
• jsondiffpatch-react - JSON se dispute.
• iron-session - Bibliothèque de session sécurisée, apatride et basée sur les cookies.

Générateur de site Web statique

• gatsby - Transformer le texte simple en blogs et sites Web dynamiques React.js.

Solutions Cloud

Back to top ⬆️

Bases de données

• BCMS - Système de gestion de contenu basé sur l’API, open-source, auto-installable pour Gatsby, Nuxt et Next.
• crisp-bigquery - Complète pile Google BigQuery avec Express dans TypeScript.
• react-server-routing-example - Routage client/serveur universel et données avec AWS DynamoDB.