react complex tree

Arbre complexe de réaction

Un composant d'arborescence accessible sans opinion avec sélection multiple et glisser-déposer

Consultez la documentation officielle pour voir plus d’exemples et une documentation plus complète. De nombreux problèmes ou questions courants sont traités dans la page FAQ.

Le journal des modifications est disponible sur https://rct.lukasbach.com/docs/changelog. Consultez les notes de version v2 lors de la migration de v1.x vers v2.x.

Commanditaires

Le développement de React-Complex-Tree est soutenu par la communauté. Un merci spécial à :

Découvrez comment prendre en charge le développement de React-Complex-Tree.

Installation

Pour commencer à utiliser React Complex Tree, installez-le sur votre projet en tant que dépendance via

 npm install react-complex-tree
yarn add react-complex-tree

puis importez-le et ajoutez votre arborescence avec

 import { UncontrolledTreeEnvironment , Tree , StaticTreeDataProvider } from 'react-complex-tree' ;

< UncontrolledTreeEnvironment
  dataProvider = { new StaticTreeDataProvider ( longTree . items , ( item , data ) => ( { ... item , data } ) ) }
  getItemTitle = { item => item . data }
  viewState = { { } }
>
  < Tree treeId = "tree-1" rootItem = "root" treeLabel = "Tree Example" / >
< / UncontrolledTreeEnvironment > ;

Plus de détails dans le Guide de démarrage. Le guide sur la façon d'intégrer des données avec un fournisseur de données d'arborescence statique est également un bon point de départ pour comprendre comment intégrer des données avec React Complex Tree.

Caractéristiques

• Sans opinion

  React Complex Tree ne fait aucune hypothèse sur l'esthétique de votre conception Web ou sur les technologies que vous utilisez. Le rendu dépend entièrement de vous et chaque nœud écrit dans le DOM peut être personnalisé. Des valeurs par défaut sensées, stylisées par des classes CSS facilement personnalisables, sont fournies pour faciliter l'intégration.

• Accessible

  La structure arborescente est conforme à la spécification du W3C pour les arbres accessibles. Il prend en charge les lecteurs d'écran et implémente toutes les interactions clavier courantes afin que chaque interaction, du déplacement du focus au déplacement d'éléments, soit possible sans utiliser la souris.

• Glisser-déposer puissant

  L'arborescence fournit les fonctionnalités attendues que les utilisateurs expérimentés attendent des outils avancés. Sélectionnez autant d'éléments que vous le souhaitez et faites-les glisser n'importe où dans le même arbre ou dans tout autre arbre ! React Complex Tree est livré avec de nombreuses options de personnalisation pour le glisser-déposer, telles que l'interdiction de la réorganisation ou l'activation du glisser-déposer sur certains éléments uniquement.

• Commandes complètes du clavier

  L'arbre est entièrement contrôlable via le clavier. Il implémente tous les contrôles suggérés par le W3C pour rendre les arbres accessibles et fournit des contrôles supplémentaires pour le glisser-déposer, la recherche ou le renommage d'éléments.

• Zéro dépendance

  Nous savons à quel point il est ennuyeux d'ajouter un package et de se retrouver avec des centaines de dépendances homologues. Étant donné que React Complex Tree ne fait aucune hypothèse sur vos dépendances, nous n'avons pas non plus besoin d'encombrer votre projet avec d'autres packages. Lorsque vous ajoutez React Complex Tree à votre package, vous ajoutez uniquement cela et aucune autre dépendance.

• Multi-sélection

  Outre d'autres bibliothèques d'arborescences plus simples, React Complex Tree vous permet de sélectionner autant d'éléments que vous le souhaitez et de les déplacer tous en même temps en les faisant glisser vers un emplacement différent. Pourquoi fournir moins de fonctionnalités à vos utilisateurs, alors que vous pouvez offrir de puissantes fonctionnalités d'arborescence sans effort supplémentaire ? Essayez-le sur la démo ci-dessus et sélectionnez plusieurs éléments à la fois en maintenant le contrôle sur votre clavier tout en cliquant sur les éléments, puis en les faisant glisser d'un seul coup vers un emplacement différent.

• Renommer l'intégré

  React Complex Tree permet de renommer en tant que fonctionnalité native avec ses capacités. Sélectionnez n’importe quel élément et appuyez sur F2 pour commencer à renommer l’élément. Cela offre un moyen plus intuitif de renommer des éléments pour les utilisateurs sans implémenter de solutions de dialogue personnalisées qui perturbent davantage le flux de travail de vos utilisateurs.

• Fonctionnalité de recherche

  Avez-vous déjà essayé de trouver ce fichier dans une énorme arborescence de fichiers chaotique dont vous savez qu'il se trouve là, mais vous ne savez pas où ? Commencez simplement à taper tout en focalisant l’arborescence, et le premier élément correspondant à votre recherche apparaîtra. Cela améliore également l'accessibilité de l'arborescence, car les utilisateurs utilisant uniquement le clavier peuvent naviguer plus facilement dans la structure arborescente.

• Environnements multi-arbres

  Vous pouvez utiliser plusieurs arborescences sur votre application Web qui partagent un état commun et sont capables d'interagir les unes avec les autres. Les éléments d'état et d'arborescence sont fournis à un composant de fournisseur de réaction commun, et autant d'arborescences que vous le souhaitez peuvent facilement être intégrées en ajoutant simplement des composants d'arborescence sous le fournisseur. Les arbres n'ont pas besoin de fournir leur propre état, ils ont juste besoin d'un identifiant et de leur élément racine, toutes les autres logiques sont gérées par le fournisseur.

• Interfaces contrôlées et non contrôlées

  La façon la plus simple d'utiliser React Complex Tree consiste à utiliser un environnement d'arborescence non contrôlé qui maintient lui-même l'état de l'arborescence, c'est-à-dire quels éléments sont sélectionnés, développés, etc. Il vous suffit de fournir un fournisseur de données qui définit la manière dont les éléments sont chargés de manière asynchrone, et l'environnement fait le reste. Cependant, si vous souhaitez plus de contrôle, vous pouvez utiliser l'environnement contrôlé pour une personnalisation complète.

• Propulsé par React et TypeScript

  React Complex Tree est alimenté par React (duh) et s'intègre facilement aux projets React existants en important et en utilisant simplement les composants fournis. Des informations complètes sur les types sont fournies sous forme d'interfaces TypeScript, qui facilitent l'intégration et offrent une sécurité de type supplémentaire, que vous utilisiez ou non TypeScript dans votre projet.

Conseils pour contribuer

Si vous souhaitez développer RCT localement, voici quelques conseils :

• Utilisez volta pour vous assurer que vous disposez d'une version compatible de NodeJS et Yarn installée
• Exécutez yarn pour installer les dépendances
• Exécutez yarn build une fois localement avant d'exécuter des commandes de développement
• Exécutez yarn start pour démarrer Docusaurus et le package en mode montre, et/ou yarn storybook pour exécuter Storybook
• Assurez-vous d'exécuter linter et des tests avant de pousser les modifications