Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Translate Community/Tools/UI Components page #128

Merged
merged 3 commits into from
Apr 15, 2019
Merged

Translate Community/Tools/UI Components page #128

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
64919f8
Translate Community/Tools/UI Components page
linsolas Mar 22, 2019
b22058a
Apply suggestions from code review
linsolas Apr 15, 2019
813f51c
Final tweaks
tdd Apr 15, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
143 changes: 72 additions & 71 deletions content/community/tools-ui-components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,79 +1,80 @@
---
id: ui-components
title: UI Components
title: Composants UI
layout: community
permalink: community/ui-components.html
---

## Free Components {#free-components}
* **[Amaze UI React](https://github.com/amazeui/amazeui-react) (in Chinese):** [Amaze UI](https://github.com/allmobilize/amazeui) components built with React.
* **[Ant Design of React](https://github.com/ant-design/ant-design)** An enterprise-class UI design language and React-based implementation.
* **[Belle](https://github.com/nikgraf/belle/):** Configurable React Components with great UX.
* **[chartify](https://github.com/kirillstepkin/chartify)**: Ultra lightweight and customizable React.js chart component.
* **[Elemental UI](http://elemental-ui.com):** A UI toolkit for React websites and apps, themeable and composed of individually packaged components
* **[Grommet](https://grommet.io/)** The most advanced open source UX framework for enterprise applications.
* **[Halogen](https://yuanyan.github.io/halogen/):** A collection of highly customizable loading spinner animations with React.
* **[Khan Academy's component library](https://khan.github.io/react-components/)**
* **[markdown-to-jsx](https://www.npmjs.com/package/markdown-to-jsx)**: compiles markdown into safe React JSX without using dangerous escape hatches.
* **[Material-UI](https://material-ui.com/):** React components that implement Google's Material Design.
* **[Mobiscroll Lite for React](https://mobiscroll.com/forms/react):** A collection of 15 free UI components ranging from inputs, selects, sliders, alerts to rating.
* **[Onsen UI React Components](https://onsen.io/v2/react.html):** UI components for hybrid mobile apps with both Material Design for Android and flat design for iOS.
* **[PrimeReact](https://www.primefaces.org/primereact/):** A rich UI component suite for React featuring 70+ open source components.
* **[React Amazing Grid](https://github.com/Amazing-Space-Invader/react-amazing-grid)** Flex grid with inline styles.
* **[React Mdl](https://github.com/tleunen/react-mdl)** React Components for Material Design Lite.
* **[React Web](https://github.com/taobaofed/react-web)** A framework for building web apps with React.
* **[react-amiga-guru-meditation](https://github.com/gfazioli/react-amiga-guru-meditation):** React JS Class to display a Amiga Guru Meditation Tribute
* **[react-autosuggest](https://github.com/moroshko/react-autosuggest)** WAI-ARIA compliant React autosuggest component
* **[react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd):** Beautiful, accessible drag and drop for lists with React.js
* **[react-bootstrap](https://github.com/stevoland/react-bootstrap):** Bootstrap 3 components built with React.
* **[react-bootstrap-dialog](https://github.com/akiroom/react-bootstrap-dialog):** React Dialog component for react-bootstrap, instead of `window.alert` or `window.confirm`
* **[react-bootstrap-table2](https://github.com/react-bootstrap-table/react-bootstrap-table2):** It's a react table for Bootstrap.
* **[react-component](https://github.com/react-component/):** A collection of react components maintained by Alibaba/Alipay employee.
* **[react-data-menu](https://github.com/dkozar/react-data-menu):** Smart data-driven menu rendered in an overlay. Hints-based aligning with custom renderers and factories. Never clipped by other components or screen edges.
* **[react-date-picker](https://github.com/Hacker0x01/react-datepicker):** A simple and reusable datepicker component for React.
* **[react-dates](https://github.com/OpusCapita/react-dates):** Date-inputs + date-picker
* **[react-dnd](https://github.com/gaearon/react-dnd)** Flexible HTML5 drag-and-drop mixin for React with full DOM control
* **[react-document-title](https://github.com/gaearon/react-document-title)** Declarative, nested, stateful, isomorphic document.title for React
* **[react-dropzone](https://github.com/felixrieseberg/React-Dropzone):** React Dropzone for File-Uploads
* **[react-forms](https://prometheusresearch.github.io/react-forms/):** Form rendering and validation for React
* **[react-highlight](https://github.com/akiran/react-highlight):** React component for syntax highlighting
* **[react-image](https://github.com/mbrevda/react-image):** Like `<img />` and Enhanced Image Component for React.
* **[react-input-autosize](https://github.com/JedWatson/react-input-autosize):** Like `<input />` but resizes automatically to fit all its content.
* **[react-intense](https://github.com/brycedorn/react-intense):** A component for viewing large images up close
* **[react-joyride](https://github.com/gilbarbara/react-joyride):** Create walkthroughs and guided tours for your ReactJS apps.
* **[react-ladda](https://github.com/jsdir/react-ladda):** React wrapper for Ladda buttons.
* **[react-lorem-component](https://github.com/martinandert/react-lorem-component):** Lorem Ipsum placeholder component.
* **[react-notification](https://github.com/pburtchaell/react-notification):** Snackbar style notifications
* **[react-select](https://github.com/JedWatson/react-select):** Native React Select / Multiselect input field, similar to Selectize / Chosen / Select2
* **[react-selectize](https://furqanzafar.github.io/react-selectize/):** A stateless & flexible Select component, designed as a drop in replacement for React.DOM.Select, inspired by Selectize
* **[react-sigma](https://www.npmjs.com/package/react-sigma)**: Lightweight but powerful library for drawing network graphs
* **[react-slick](https://github.com/akiran/react-slick):** Carousel component built with React
* **[react-sparklines](https://borisyankov.github.io/react-sparklines/):** Beautiful and expressive sparklines component
* **[react-spreadsheet](https://github.com/felixrieseberg/React-Spreadsheet-Component):** React Spreadsheets / Editable tables with Excel-Style keyboard input and navigation
* **[react-switch-button](https://github.com/gfazioli/react-switch-button):** Beautiful React Switch button component
* **[react-tappable](https://github.com/JedWatson/react-tappable)** A Tappable React Component that provides native-feeling onTap events for mobile React apps
* **[react-textarea-autosize](https://github.com/andreypopp/react-textarea-autosize):** Like `<textarea />` but resizes automatically to fit all its content.
* **[react-toastify](https://github.com/fkhadra/react-toastify):** React notification made easy
* **[React-TimeAgo](https://www.npmjs.org/package/react-timeago)** A minimal live updating Time Ago component that smartly converts any time to a 'ago' or 'from now' format and keeps it updated.
* **[react-translate-component](https://github.com/martinandert/react-translate-component):** React component for i18n.
* **[react-treeview](https://github.com/chenglou/react-treeview):** Easy, light, flexible tree view.
* **[react-uwp](https://www.react-uwp.com)** A set of React Components that Implement Microsoft's UWP Design & Fluent Design..
* **[react-validate-framework](https://github.com/MinJieLiu/react-validate-framework)**: A lightweight and extensible React validation component.
* **[reactstrap](https://reactstrap.github.io/):** Simple Bootstrap 4 components built with [tether](http://tether.io/)
* **[recharts](https://github.com/recharts/recharts)**: A composable charting library built on React components.
* **[Selectivity](https://arendjr.github.io/selectivity/):** Modular and light-weight selection library.
* **[Semantic-ui](https://react.semantic-ui.com/)**: The official Semantic-UI-React integration, Advanced components and declarative UI.
* **[storybook-addon-material-ui](https://github.com/sm-react/storybook-addon-material-ui)** A storybook addon for material-ui.
* **[tcomb-form](https://github.com/gcanti/tcomb-form):** Automatically generate form markup, automatic labels and inline validation from a domain model.
* **[valuelink](https://github.com/Volicon/valuelink):** Full-featured two-way data binding and forms validation with extended React links.
* **[video-react](https://github.com/video-react/video-react)**: A web video player built for the HTML5 world using React library.
* **[Winterfell](https://github.com/andrewhathaway/Winterfell):** Generate complex, validated and extendable JSON-based forms in React
## Composants gratuits {#free-components}

## Fee Based Components {#fee-based-components}
* **[Amaze UI React](https://github.com/amazeui/amazeui-react)** : composants [Amaze UI](https://github.com/allmobilize/amazeui) construits avec React (en chinois).
* **[Ant Design of React](https://github.com/ant-design/ant-design)** : un langage de conception d'interface utilisateur *(UI pour User Interface, NdT)* et une implémentation basée sur React.
* **[Belle](https://github.com/nikgraf/belle/)** : composants React configurables avec une belle UX *(User eXperience, NdT)*.
* **[chartify](https://github.com/kirillstepkin/chartify)** : composant de graphiques en React ultra léger et personnalisable.
* **[Elemental UI](http://elemental-ui.com)** : une boîte à outils pour les sites web et applis React, prenant en charge les thèmes et constituée de composants empaquetés individuellement.
* **[Grommet](https://grommet.io/)** : un framework UX open source pour des applications d'entreprise.
* **[Halogen](https://yuanyan.github.io/halogen/)** : une collection d'animations de chargement hautement personnalisables avec React.
* **[La bibliothèque de composants de la Khan Academy](https://khan.github.io/react-components/)**
* **[markdown-to-jsx](https://www.npmjs.com/package/markdown-to-jsx)** : compile du Markdown en JSX React sûr sans recourir à des échappatoires dangereuses.
* **[Material-UI](https://material-ui.com/)** : composants React implémentant le Material Design de Google.
* **[Mobiscroll Lite for React](https://mobiscroll.com/forms/react)** : une collection de 15 composants UI gratuits, allant des champs de saisie aux sélecteurs en passant par les curseurs, les alertes et les éléments de notation.
* **[Onsen UI React Components](https://onsen.io/v2/react.html)** : composants UI pour les applis mobiles hybrides avec à la fois le Material Design de Google et le Flat Design pour iOS.
* **[PrimeReact](https://www.primefaces.org/primereact/)** : une suite de composants UI riche pour React comportant plus de 70 composants open source.
* **[React Amazing Grid](https://github.com/Amazing-Space-Invader/react-amazing-grid)** : grille Flex avec des styles en-ligne.
* **[React Mdl](https://github.com/tleunen/react-mdl)** : composants React pour Material Design Lite.
* **[React Web](https://github.com/taobaofed/react-web)** : un framework pour construire des applis web avec React.
* **[react-amiga-guru-meditation](https://github.com/gfazioli/react-amiga-guru-meditation)** : classe JavaScript React pour afficher un message d'erreur rendant hommage à l'Amiga Guru Meditation.
* **[react-autosuggest](https://github.com/moroshko/react-autosuggest)** : composant d'auto-suggestion React compatible avec les recommandations WAI-ARIA.
* **[react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd)** : gestion belle et accessible du glisser-déposer avec React.
* **[react-bootstrap](https://github.com/stevoland/react-bootstrap)** : composants Bootstrap 3 construits avec React.
* **[react-bootstrap-dialog](https://github.com/akiroom/react-bootstrap-dialog)** : composant Dialog en React pour react-bootstrap, pour remplacer `window.alert` ou `window.confirm`.
* **[react-bootstrap-table2](https://github.com/react-bootstrap-table/react-bootstrap-table2)** : table React pour Bootstrap.
* **[react-component](https://github.com/react-component/)** : une collection de composants React maintenus par les employés de Alibaba / Alipay.
* **[react-data-menu](https://github.com/dkozar/react-data-menu)** : menu intelligent piloté par la donnée affiché dans une superposition. Alignement basé sur des indications avec des moteurs de rendu et des *factories* personnalisés. Il n'est jamais coupé par d'autres composants ou par les bords de l'écran.
* **[react-date-picker](https://github.com/Hacker0x01/react-datepicker)** : un sélecteur de date simple et réutilisable en React.
* **[react-dates](https://github.com/OpusCapita/react-dates)** : champ de date et sélecteur de date.
* **[react-dnd](https://github.com/gaearon/react-dnd)** : *mixin* de glisser-déposer flexible en HTML5 pour React avec un contrôle total sur le DOM.
* **[react-document-title](https://github.com/gaearon/react-document-title)** : gestion déclarative, embarquée, à état et isomorphe du `document.title` pour React.
* **[react-dropzone](https://github.com/felixrieseberg/React-Dropzone)** : React Dropzone pour des téléversements de fichiers.
* **[react-forms](https://prometheusresearch.github.io/react-forms/)** : rendu et validation de formulaires pour React.
* **[react-highlight](https://github.com/akiran/react-highlight)** : composant React pour la coloration syntaxique.
* **[react-image](https://github.com/mbrevda/react-image)** : comme la balise `<img />` mais avec un composant avancé d'image pour React.
* **[react-input-autosize](https://github.com/JedWatson/react-input-autosize)** : comme la balise `<input />` mais avec un redimensionnement automatique pour s'adapter au contenu.
* **[react-intense](https://github.com/brycedorn/react-intense)** : un composant pour visualiser des grandes images de près.
* **[react-joyride](https://github.com/gilbarbara/react-joyride)** : créez des visites guidées pour vos applis React.
* **[react-ladda](https://github.com/jsdir/react-ladda)** : enrôbeur React pour les boutons Ladda.
* **[react-lorem-component](https://github.com/martinandert/react-lorem-component)** : composant générateur de *Lorem Ipsum*.
* **[react-notification](https://github.com/pburtchaell/react-notification)** : notifications avec un style Snackbar.
* **[react-select](https://github.com/JedWatson/react-select)** : champ de saisie de type sélecteur / multi-sélecteur pour React, similaire à Selectize / Chosen / Select2.
* **[react-selectize](https://furqanzafar.github.io/react-selectize/)** : un composant de sélection sans état et flexible, conçu pour remplacer React.DOM.Select, inspiré par Selectize.
* **[react-sigma](https://www.npmjs.com/package/react-sigma)** : une bibliothèque légère mais puissante permettant de dessiner des graphes de réseaux.
* **[react-slick](https://github.com/akiran/react-slick)** : composant de carrousel construit avec React.
* **[react-sparklines](https://borisyankov.github.io/react-sparklines/)** : composant joli et expressif pour des graphes en ligne.
* **[react-spreadsheet](https://github.com/felixrieseberg/React-Spreadsheet-Component)** : feuilles de calcul et tableaux modifiables en React, avec une saisie au clavier et navigation de type Excel.
* **[react-tappable](https://github.com/JedWatson/react-tappable)** : un composant Tappable React qui génère des événements `onTap` pour des applis mobiles React.
* **[react-textarea-autosize](https://github.com/andreypopp/react-textarea-autosize)** : comme `<textarea />` mais avec un redimensionnement automatique pour s'adapter au contenu.
* **[react-toastify](https://github.com/fkhadra/react-toastify)** : des notifications simplifiées pour React.
* **[react-toggle](https://github.com/gfazioli/react-toggle)** : joli composant React d'interrupteur à bascule.
* **[React-TimeAgo](https://www.npmjs.org/package/react-timeago)** : un composant minimaliste TimeAgo avec mise à jour dynamique qui convertit intelligemment n'importe quelle date en un format « il y a… » ou « dans… » et le tient à jour.
* **[react-translate-component](https://github.com/martinandert/react-translate-component)** : composant d'internationalisation pour React.
* **[react-treeview](https://github.com/chenglou/react-treeview)** : vue arborescente facile, légère et flexible.
* **[react-uwp](https://www.react-uwp.com)** : un ensemble de composants React qui implémentent le UWP Design et le Fluent Design de Microsoft.
* **[react-validate-framework](https://github.com/MinJieLiu/react-validate-framework)** : un composant léger et extensible de validation de formulaires pour React.
* **[reactstrap](https://reactstrap.github.io/)** : composants simples en Bootstrap 4 construits avec [tether](http://tether.io/).
* **[recharts](https://github.com/recharts/recharts)** : une bibliothèque de graphiques composables construite sur des composants React.
* **[Selectivity](https://arendjr.github.io/selectivity/)** : une bibliothèque modulaire et légère pour les sélections.
* **[Semantic-ui](https://react.semantic-ui.com/)** : l'intégration officielle de Semantic-UI-React, avec des composants avancés et une UI déclarative.
* **[storybook-addon-material-ui](https://github.com/sm-react/storybook-addon-material-ui)** : une extension de Storybook pour material-ui.
* **[tcomb-form](https://github.com/gcanti/tcomb-form)** : génération automatique des balises de formulaires, avec libellés automatiques, et validation en-ligne depuis un modèle de domaine.
* **[valuelink](https://github.com/Volicon/valuelink)** : liaison de données bidirectionnelle et validation de formulaires avec des liens React étendus.
* **[video-react](https://github.com/video-react/video-react)** : un lecteur de vidéo web construit pour le HTML5 en utilisant React.
* **[Winterfell](https://github.com/andrewhathaway/Winterfell)** : générez des formulaires complexes, validés, et extensibles basés sur des descripteurs JSON.

* **[ag-Grid](https://www.ag-grid.com)** Advanced data grid / data table for React.
* **[ExtReact components](https://www.sencha.com/products/extreact//)**: 115+ Ready-to-Use UI Components.
* **[Grapecity Wijmo UI Components for React](https://www.grapecity.com/en/react/)**: Expand your React UI options with Wijmo’s complete collection of JavaScript components.
* **[jQWidgets React components](https://www.jqwidgets.com/react/)**: Enterprise Ready 70+ UI Components.
* **[KendoReact](https://www.telerik.com/kendo-react-ui/)**: UI for React Developers.
* **[Mobiscroll React UI Components](https://mobiscroll.com/react)** Mobile UI Controls for the Productive React Developer.
## Composants payants {#fee-based-components}

* **[ag-Grid](https://www.ag-grid.com)** : grille de données avancée pour React.
* **[ExtReact components](https://www.sencha.com/products/extreact/)** : plus de 115 composants UI prêts à l'emploi.
* **[Grapecity Wijmo UI Components for React](https://www.grapecity.com/en/react/)** : développez vos options d'UI React avec une collection de composants JavaScript Wijmo.
* **[jQWidgets React components](https://www.jqwidgets.com/react/)** : plus de 70 composants UI prêts pour l'entreprise.
* **[KendoReact](https://www.telerik.com/kendo-react-ui/)** : éléments d'UI pour les développeurs React.
* **[Mobiscroll React UI Components](https://mobiscroll.com/react)** : éléments d'UI pour les développements d'application mobile en React.