Un guide rapide des menus déroulants avec React

Vous rencontrez probablement encore plus de listes déroulantes que vous ne le pensez. Explorons certains des types de listes déroulantes que vous pouvez utiliser lors de la création de votre prochaine application React.

Les listes déroulantes sont une fonctionnalité commune à de nombreux sites Web. Ils sont très utiles, car ils permettent d'afficher facilement des données supplémentaires uniquement lorsque cela est nécessaire. Par exemple, si nous voulons qu'un utilisateur sélectionne son pays d'origine, une liste de pays ne sera pas visible tant qu'un utilisateur n'aura pas cliqué sur la liste déroulante des pays. Un autre bon exemple est la fonctionnalité de saisie semi-automatique. Lorsqu'un utilisateur recherche un élément, vous pouvez afficher une liste déroulante avec une liste de suggestions qui peuvent aider à effectuer la recherche plus rapidement.

Explorons certains des types de listes déroulantes que vous pouvez utiliser dans votre application.

Types de listes déroulantes

Vous rencontrez probablement un tas de listes déroulantes dans votre vie quotidienne, que vous y pensiez ou non.

Par exemple, l'utilisation de la barre de recherche Google fera apparaître une liste déroulante de saisie semi-automatique :

De même, YouTube utilise une liste déroulante de saisie semi-automatique pour afficher des suggestions de vidéos :

La saisie semi-automatique n'est pas la seule fonctionnalité pour laquelle des listes déroulantes sont utilisées. Par exemple, de nombreux sites Web utilisent des listes déroulantes pour leur navigation, comme Target :

Si une simple navigation déroulante ne suffisait pas, il existe des sites Web qui intègrent des méga menus déroulants. Ceux-ci sont souvent utilisés par les sites Web de commerce électronique qui peuvent contenir de nombreux liens vers des catégories et des produits. L'un d'eux est Asda :

Un autre exemple est un menu déroulant contextuel. Facebook l'utilise pour proposer aux utilisateurs des actions liées aux publications :

Il existe de nombreux autres exemples de listes déroulantes, mais voyons maintenant comment implémentez des exemples concrets dans votre code.

Création avec des listes déroulantes

Dans cet article, nous couvrirons plusieurs exemples de listes déroulantes et de composants de formulaire React. J'utiliserai KendoReactqui fournit un certain nombre de composants très utiles et riches en fonctionnalités. Nous allons implémenter des menus déroulants et sélectionner des composants pour des cas d'utilisation réels à l'aide de ces composants :

Vous pouvez voir ci-dessous ce que nous allons construire dans le CodeSandbox interactif.

Configuration du projet

Commençons par configurer un nouveau React projet. Pour en créer rapidement un, vous pouvez utiliser Create React App ou Vite. Pour cette démo, nous allons utiliser Create React App. Vous pouvez créer un projet React en exécutant l'une des commandes ci-dessous dans votre terminal.

npx create-react-app my-kendo-react-dropdowns
cd my-kendo-react-dropdowns
npm start // ou début du fil

Nous devons maintenant installer quelques packages nécessaires à l'utilisation des listes déroulantes KendoReact.

Remarque : KendoReact est une bibliothèque commerciale de composants d'interface utilisateur. vous utilisez les composants dans vos projets React. Vous pouvez obtenir une clé de licence via un essai gratuit ou en possédant une licence commerciale. Pour plus d'informations, vous pouvez vous rendre sur la page KendoReact Licensing.

// npm
npm install --save @progress/kendo-react-dropdowns @progress/kendo-react-treeview @progress/kendo-react-animation @progress/kendo-react-intl @progress/kendo-react-data-tools @progress/ kendo-react-common @progress/kendo-data-query @progress/kendo-react-buttons @progress/kendo-react-dateinputs @progress/kendo-react-inputs @progress/kendo-drawing @progress/kendo-licensing @ progression/kendo-theme-default
  
// fil
fil ajouter @progress/kendo-react-dropdowns @progress/kendo-react-treeview @progress/kendo-react-animation @progress/kendo-react-intl @progress/kendo-react-data-tools @progress/kendo-react -common @progress/kendo-data-query @progress/kendo-react-buttons @progress/kendo-react-dateinputs @progress/kendo-react-inputs @progress/kendo-drawing @progress/kendo-licensing @progress/kendo -theme-default

Après avoir installé les packages, faisons un petit nettoyage. Vous pouvez remplacer les styles du fichier App.css et le contenu du fichier App.js par le code ci-dessous.

src/App.js

import  '@progress/kendo-theme-default/dist/all.css';  
import "./App.css";  
fonction App[19659030]() {  
  return <div className="App"> </div>;  
}  
  
export default App;

src/App.css

.App {  
  max-width: 40rem;  
  margin[19659030]: 2rem auto;  
}

Voilà pour la configuration du projet. Implémentons la première liste déroulante.

React DropDownList

Imaginez un site Web de recettes qui permet aux utilisateurs de rechercher des recettes, des vidéos et des articles liés à la nourriture. Un utilisateur doit pouvoir filtrer les résultats en fonction de la catégorie. La création d'une liste déroulante de catégories avec KendoReact est très simple.

Nous aurons besoin de deux tableaux, un pour stocker les catégories et le second avec des données qui seront filtrées par la catégorie sélectionnée. Deux éléments principaux seront rendus : le composant DropDownList qui affichera une liste des catégories disponibles et les résultats filtrés. Ci-dessous, vous pouvez voir le code du composant RecipeDropDownList.

src/components/DropDownList/RecipeDropDownList.js

import { useMemo[1945900342]] useState } from "react";  
import { DropDownList } from "@progress/kendo-react -dropdowns";  
  

const categories = ["all", "recette", "video"[19659030], "article"];  
  
  

const données = [  
  {
    identifiant: 1,
    étiquette : "Meilleur Ramen jamais",
    tapez: "recette",  
  },  
  {
    identifiant: 2,
    label : "Top 10 plats mexicains",
    tapez: "article",  
  },  
  {
    identifiant: 3,
    label : "Comment préparer un poulet entier rôti",
    tapez: "vidéo",  
  },  
  {
    identifiant: 4,
    étiquette : "Gnocchis de poulet au piment",
    tapez: "recette",  
  },  
  {
    identifiant: 5,
    label : "Les 5 meilleurs desserts glacés pour un été chaud",
    tapez: "article",  
  },  
];  
  
export const RecipeDropDownList =  () => {  
  
  const [category, setCategory] = useState( "");  
  
  
  
  const filteredData = useMemo(() => {   
    if (!catégorie || catégorie === "all") return data;  
  
    return data.filter(item => item.type ===  catégorie);  
}, [catégorie]);  
  

  retour ([19659176]<section classe Nom="k-my-8">
      <form className="k-form k-mb-4">
        <label className="k-label k-mb- 3">Catégorie</label>
        <DropDownList data={catégories} onChange={e => setCategory(e. valeur)} />
      </form>

      <section className="k-listgroup">
        <ul>[19659191]
          {filteredData.map(item => {
            return (
              <li key={item.id} className= "k-listgroup-item">
                {article.libellé}
              </li>
            );
          })}
        </ul>
      </section>
    </section>
  );
};

Vous pouvez maintenant l'ajouter dans le fichier App.js.

src/App.js

import "@progress/kendo-theme-default/dist /all.css";  
import "./App.css";  
import { RecipeDropDownList } from  "./components/DropDownList/RecipeDropDownList";  
  
fonction App() {  
  retour (
    <div className="App">
      <RecipeDropDownList />
    </div>  
  );  
}  
  
export default App;

Ci-dessous, vous pouvez voir la liste déroulante de la recette en action.

React MultiSelect

MultiSelect, comme son nom l'indique, est une liste déroulante de sélection qui permet à un utilisateur de sélectionner plusieurs éléments. Dans l'exemple précédent, nous avons créé une liste déroulante de sélection qui permet à un utilisateur de sélectionner une catégorie.

Cependant, il existe des scénarios dans lesquels il est utile de permettre aux utilisateurs de sélectionner plusieurs éléments. Par exemple, une plateforme de blog technologique pourrait permettre à un rédacteur technique de sélectionner des technologies liées à un article. Il suffit de regarder cet article. Si je devais spécifier des balises pour cela, je choisirais probablement les balises JavaScript, React et KendoReact. Maintenant, implémentons un multiselect.

src/components/MultiSelect/TagsMultiSelect.js

import { MultiSelect } from "@progress/kendo -react-dropdowns";  
import { useState } from "react";  
  
const tags  = [  
  "JavaScript",  
  "TypeScript",  
  "React",  
  "Suivant",  
  "Vue ",  
  "Nuxt",  
  "Node",  
  "Python",  
];  
  
export  const TagsMultiSelect = () => {  
  const [selectedTags, setSelectedTags]  = useState([]);  
  const onChange = événement =>[19659035]setSelectedTags([...événement.value]);  
  
  return (
    <form className="k-form k-my-8">
      <label className="k-label k-mb-3">Technologies associées </étiquette>
      <MultiSelect data={tags} value={selectedTags } onChange={onChange} autoClose={faux}  />
    </form>  
  );  
};

Encore une fois, mettez à jour le fichier App.js pour rendre notre composant TagsMultiSelect.

src/App.js

import { TagsMultiSelect } from "./components/MultiSelect/TagsMultiSelect";  
  
function App() {  
  retour  (
    <div className="App">
      { }
      <TagsMultiSelect />
    </div>  
  );  
}  
  
export default App;

Dans le gif ci-dessous, vous pouvez voir le composant TagsMultiSelect en action.

React AutoComplete

Il existe de nombreux sites Web qui demandent aux utilisateurs de fournir leurs informations personnelles et leur lieu de résidence. Très souvent, un formulaire comme celui-ci contient une liste déroulante qui permet aux utilisateurs de sélectionner le pays dans lequel ils vivent. Tout d'abord, créez un nouveau fichier qui contiendra tous les pays.

src/components/AutoComplete/countries.js[19659414]export const pays = [
{ label: "Andorre" },
{ étiquette: "Emirats Arabes Unis" },
…

…
{ étiquette: "Zambie" },
{ étiquette: "Zimbabwe" },
];

Utilisons ces pays et créons un nouveau composant React AutoComplete.

src/components/AutoComplete/CountryAutoComplete.js

import { pays }[19659050]from "./countries";  
import { Saisie semi-automatique } from "@progress/kendo-react-dropdowns" ;  
  
export const CountryAutoComplete = () => {  
  return (
    <form className="k-form k-my-8">
      <label className="k-label k-mb-3">Sélectionnez le pays </étiquette>
      <Saisie semi-automatique data={pays} textField="label " suggérer />
    </form>  
  );  
};

Maintenant, nous pouvons rendre le CountryAutoComplete dans le fichier App.js.

src/App.js

import { CountryAutoComplete } from './components/AutoComplete/CountryAutoComplete'  
  
function App() {  
  return (
    <div className="App">
      { }
      <PaysAutoComplete />
    </div>  
  );  
}  
  
export default App;

Vous pouvez voir ci-dessous le composant de saisie semi-automatique du pays en action.

React ComboBox

Le composant ComboBox est assez similaire au composant DropDownList que nous avons utilisé précédemment mais permet aux utilisateurs de le saisir. Il fournit également des fonctionnalités supplémentaires, telles que le regroupement et les suggestions.

Prenons l'exemple d'un logiciel de gestion de projet. Lors de la création d'une nouvelle tâche, vous pouvez l'affecter à un employé de votre entreprise. Cependant, si votre entreprise a beaucoup d'employés, il serait utile de voir dans quel département ils se trouvent, il est donc plus facile de trouver des cessionnaires.

src/components/ComboBox/AssignessComboBox.js

import[19659038]{ ComboBox } from "@progress/kendo-react-dropdowns";
import { useState }[19659050]de "react";

const cessionnaires = [
  {
    identifiant: 1,
    nom : "Chloe Williams",
    profession : "Développeur",
  },
  {
    identifiant: 2,
    nom : "Severus Rogue",
    profession : "Développeur",
  },
  {
    identifiant: 3,
    nom : "Mark Smith",
    profession : "Support technique",
  },
  {
    identifiant: 4,
    nom : "Rosemary Adams",
    profession : "Support technique",
  },
  {
    identifiant: 5,
    nom : "Joe McDonalds",
    profession: "Designer",
  },
  {
    identifiant: 6,
    nom : "Minerva McGonagall",
    profession: "Designer",
  },
];

export const AssignéesComboBox =  () => {
  const [selectedAssignee, setSelectedAssignee] = useState( null);
  const onChange = événement => setSelectedAssignee(event.value);

  return (
    <form className="k-form k-my-8 ">
      <label className="k-label k-mb-3"[19659030]>Task Assignee</label>
      <ComboBox
        data={assignees}[19659191]
        value={destinataire sélectionné}
        onChange={onChange}
        textField="nom"
        Champ de groupe="occupation"
        suggérer
      />
    </formulaire>
  );
};

Encore une fois, n'oubliez pas de l'ajouter au composant App.js.

src/App.js

import { AssigneesComboBox } de "./components/ComboBox/AssignesComboBox";  
  
fonction App() {  
  retour ( 
    <div className="App">
      { }
      <CessionnairesComboBox />
    </div>  
  );  
}  
  
export default App;

Ci-dessous, vous pouvez voir comment cela fonctionne. Notez les étiquettes « Développeur », « Designer » et « Support technique ». fonctionne comme le ComboBox que nous avons implémenté dans la section précédente, mais il peut afficher plusieurs colonnes dans la liste déroulante. Améliorons l'exemple d'assigné de tâche précédent et affichons tous les détails : « id », « nom » et « occupation » dans la liste déroulante.

src/components/MultiColumnComboBox/AssigneesMultiColumnComboBox.js

import {  MultiColumnComboBox } de "@progress/kendo-react-dropdowns";
import { useState } de[19659029]"réagir";

const cessionnaires = [
  {
    identifiant: 1,
    nom : "Chloe Williams",
    profession : "Développeur",
  },
  {
    identifiant: 2,
    nom : "Severus Rogue",
    profession : "Développeur",
  },
  {
    identifiant: 3,
    nom : "Mark Smith",
    profession : "Support technique",
  },
  {
    identifiant: 4,
    nom : "Rosemary Adams",
    profession : "Support technique",
  },
  {
    identifiant: 5,
    nom : "Joe McDonalds",
    profession: "Designer",
  },
  {
    identifiant: 6,
    nom : "Minerva McGonagall",
    occupation: "Designer",
  },
];

const colonnes = [
   {
    champ: "id",
    en-tête : "ID",
    largeur: "9rem",
  },
  {
    champ : "nom",
    en-tête : "Nom",
    largeur: "15rem",
  },
  {
    champ : "profession",
    en-tête : "Occupation",
    width: "15rem",
  },
];

export const AssignéesMultiColumnComboBox =  () => {
  const [selectedAssignee, setSelectedAssignee] = useState( null);
  const onChange = événement => setSelectedAssignee(event.value);

  return (
    <form className="k-form k-my-8 ">
      <label className="k-label k-mb-3"[19659030]>Destinataire de la tâche MultiColumn</label>
      <MultiColumnComboBox
        data={a signataires}
        colonnes={colonnes}
        value={destinataire sélectionné}
        onChange={onChange}
        textField="nom"
        suggérer
      />
    </formulaire>
  );
};

src/App.js

import { AssigneesMultiColumnComboBox } from "./components/MultiColumnComboBox/AssignesMultiColumnComboBox]; ". function App() {
  return (
    <div className="App">
      { }
      <AffectésMultiColumnComboBox />
    </div>
  );
}

export default App;

React DropDownTree

Le dernier mais non le moindre est le composant React DropDownTree. Il peut être utilisé pour choisir une valeur unique dans une liste hiérarchique. Ce qui est vraiment intéressant à propos de ce composant, cependant, c'est qu'il peut être utilisé pour afficher une liste d'articles pliables et extensibles.

Imaginez un site Web d'épicerie qui permet à un administrateur d'attribuer des aliments à des catégories spécifiques. Par exemple, un administrateur pourrait ouvrir une liste déroulante de sélection contenant différentes catégories telles que les boissons et les aliments réfrigérés, ainsi que des sous-catégories telles que l'eau, le jus ou le fromage. C'est quelque chose que nous pouvons implémenter avec le composant DropDownTree.

Voici l'implémentation. Cela nécessite un peu plus de code que les exemples précédents et nous devons utiliser quelques méthodes d'assistance pour gérer l'état étendu et traiter les données de l'arborescence déroulante.

src/components/DropDownTree/FoodDropDownTree.js

import[19659038]{ useCallback, useMemo, useState } from "react";
import { DropDownTree } from "@progress/kendo-react-dropdowns";
import { processTreeData,ExpandedState  } from "./treeDataOperations";

const data = [
  {
    identifiant: 1,
    texte : "Boissons",
    articles : [
      {
        identifiant: 2,
        texte: "Eau",
      },
      {
        identifiant: 3,
        texte: "Jus",
      },
      {
        identifiant: 4,
        texte : "Café et thé",
      },
    ],
  },
  {
    identifiant: 5,
    texte : "Libre de",
    articles : [
      {
        identifiant: 6,
        texte : "Sans gluten",
      },
      {
        identifiant: 7,
        texte : "Sans produits laitiers",
      },
      {
        identifiant: 8,
        texte : "Sans lactose",
      },
    ],
  },
  {
    identifiant: 9,
    texte : "Nourriture réfrigérée",
    articles : [
      {
        identifiant : 10,
        texte : "Fromage",
      },
      {
        identifiant: 11,
        texte: "Viande cuite",
      },
      {
        id: 12,
        text: "Ready Meals",
      },
    ],
  },
];

const selectField = "selected";
const expandField = "expanded";
const dataItemKey = "id";
const textField = "text";
const subItemsField = "items";
const fields = {
  selectField,
  expandField,
  dataItemKey,
  subItemsField,
};

export const FoodDropDownTree = () => {
  const [value, setValue] = useState(null);
  const [expanded, setExpanded] = useState([]);

  const onChange = event => setValue(event.value);

  const onExpandChange = useCallback(
    event => setExpanded(expandedState(event.item, dataItemKey, expanded)),
    [expanded]
  );

  const treeData = useMemo(
    () =>
      processTreeData(
        data,
        {
          expanded,
          value,
        },
        fields
      ),
    [expanded, value]
  );

  return (
    <form className="k-form k-my-8">
      <label className="k-label k-mb-3">Select Food Category</label>
      <DropDownTree
        data={treeData}
        textField={textField}
        onChange={onChange}
        dataItemKey={dataItemKey}
        selectField={selectField}
        expandField={expandField}
        onExpandChange={onExpandChange}
      />
    </form>
  );
};

src/components/DropDownTree/treeDataOperations.js

import { filterBy } from "@progress/kendo-react-data-tools";
import { mapTree, extendDataItem } from "@progress/kendo-react-common";

export const processTreeData = (data, state, fields) => {
  const { selectField, expandField, dataItemKey, subItemsField } = fields;
  const { expanded, value, filter } = state;
  const filtering = Boolean(filter && filter.value);

  return mapTree(
    filtering ? filterBy(data, [filter], subItemsField) : data,
    subItemsField,
    item => {
      const props = {
        [expandField]: expanded.includes(item[dataItemKey]),
        [selectField]: value && item[dataItemKey] === value[dataItemKey],
      };
      return filtering
        ? extendDataItem(item, subItemsField, props)
        : { ...item, ...props };
    }
  );
};

export const expandedState = (item, dataItemKey, expanded) => {
  const nextExpanded = expanded.slice();
  const itemKey = item[dataItemKey];
  const index = expanded.indexOf(itemKey);
  index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);

  return nextExpanded;
};

Lastly, add the component in the App.js file.

src/App.js

import { FoodDropDownTree } from "./components/DropDownTree/FoodDropDownTree";

function App() {
  return (
    <div className="App">
      { }
      <FoodDropDownTree />
    </div>
  );
}

export default App;

Wrap-up

That’s it! I hope you enjoyed this quick guide to dropdown menus with React. There are many use cases for dropdowns, and they are one of the most commonly used features on the web. We have covered how commonly used websites incorporate dropdowns and implemented six different React dropdown examples for real-life scenarios.

KendoReact offers a lot of feature-rich components that can be easily used for implementing a variety of features. Make sure to check out the React DropDowns documentation for more examples. You can find the full code for this tutorial in this GitHub repo.