Twórz piękne listy rozwijane za pomocą React Select

Wejście wyboru to przydatny komponent aplikacji internetowej, który pozwala wybrać wartość z wielu opcji bez zajmowania dużo miejsca. Jednak domyślna stylizacja może być nudna i kolidować z resztą projektu.

React Select oferuje adaptowalne i dostosowane do potrzeb podejście do poprawy zarówno atrakcyjności wizualnej, jak i wydajności rozwijanych elementów wejściowych, zapewniając programistom wszechstronne narzędzia do ulepszania projektu interfejsu użytkownika.

Instalacja React Select

Integracja Reacta z różnymi dodatkowymi bibliotekami lub technologiami może usprawnić proces tworzenia oprogramowania, zapewniając płynną integrację między tymi komponentami. Przykłady takich integracji obejmują między innymi React Select, React Redux, które oferują ujednolicone podejście do zarządzania złożoną funkcjonalnością w aplikacjach.

Aby zainicjować wykorzystanie React Select w projekcie, należy włączyć go jako instalację w ramach istniejącego przedsięwzięcia. Aby tego dokonać za pomocą menedżera pakietów npm, należy przejść do katalogu głównego projektu i wykonać następujące polecenie z terminala:

 npm i --save react-select

Powyższy proces ułatwi integrację określonej biblioteki z aplikacją React, umożliwiając tym samym jej wykorzystanie.

Tworzenie wybranych danych wejściowych za pomocą React Select

Po utworzeniu biblioteki jej wykorzystanie umożliwia generowanie wybranych elementów wejściowych poprzez zastosowanie wszechstronnego i konfigurowalnego komponentu Select. Komponent ten ułatwia użytkownikowi wybór z szeregu dostępnych opcji.

Dostarczony kod demonstruje implementację komponentu React Native Select , który pozwala użytkownikom wybrać jedną lub więcej opcji z listy. Element jest wykorzystywany do wprowadzania tekstu jako danych wejściowych do filtrowania wyników na podstawie słów kluczowych wpisanych przez użytkownika. Po naciśnięciu przycisku “Enter” przefiltrowane dane są wyświetlane w rozwijanym menu poniżej paska wyszukiwania do wyboru przez użytkownika.

 import React from "react"
import Select from "react-select"

function App() {
  const options = [
    { value: "apple", label: "Apple" },
    { value: "pineapple", label: "Pineapple" },
    { value: "watermelon", label: "Watermelon" },
  ]

  return (
    <div>
      <Select options={options} />
    </div>
  )
}

export default App

Na tej ilustracji importujemy komponent “Select” z biblioteki “react-select”. Następnie tworzymy tablicę opcji zawierającą trzy obiekty, z których każdy posiada dwie właściwości - atrybut “value” i atrybut “label”. Atrybut “value” oznacza dane, które zostaną przesłane do serwera po przesłaniu formularza, podczas gdy atrybut “label” oznacza tekst wyświetlany na liście rozwijanej.

Podczas renderowania komponentu Select konieczne jest dostarczenie listy opcji jako danych wejściowych przy użyciu właściwości “options”.Umożliwia to komponentowi efektywne działanie i wyświetlanie użytkownikom pożądanych opcji wyboru.

Ten blok kodu umożliwia wykorzystanie biblioteki React Select do stworzenia menu wyboru o następującym wyglądzie:

Dostosowywanie wejść Select

React Select oferuje wiele opcji dostosowywania wyglądu i funkcjonalności wybranych elementów poprzez wykorzystanie klas CSS lub zastosowanie technik stylizacji inline, które najlepiej odpowiadają preferencjom projektowym.

Dostosowywanie za pomocą klas CSS

Biblioteka React Select udostępnia właściwość className dla komponentu Select , która umożliwia użytkownikom nadanie spersonalizowanych kaskadowych arkuszy stylów (CSS) wybranym elementom.

Na przykład:

 import React from "react"
import Select from "react-select"

function App() {
  const options = [
    { value: "apple", label: "Apple" },
    { value: "pineapple", label: "Pineapple" },
    { value: "watermelon", label: "Watermelon" },
  ]

  return (
    <div>
      <Select options={options} className='select'/>
    </div>
  )
}

export default App

Podany fragment kodu demonstruje przykład składni języka programowania JavaScript. Odnosi się on do elementów HTML i ich odpowiednich atrybutów. W szczególności ilustruje wykorzystanie atrybutu className w elemencie , umożliwiając zastosowanie niestandardowych klas CSS poprzez podanie unikalnego ciągu identyfikatora jako jego wartości. Ta praktyka umożliwia dostosowanie stylizacji do wizualnego wyglądu renderowanego komponentu.

 .select {
  color: #333333;
  font-family: cursive;
  inline-size: 30%;
  font-size: 11px;
}

Po ustanowieniu tych stylów wygląd pola wyboru będzie następujący:

Dostosowywanie za pomocą stylów wbudowanych

Alternatywnie można zaimplementować style wbudowane, włączając je do obiektu stylizacji, który jest następnie przekazywany jako parametr do właściwości “styles” powiązanej z komponentem “Select”. Takie podejście pozwala na większą elastyczność i precyzję podczas kontrolowania wyglądu określonych komponentów.

Oto przykład:

 import React from "react"
import Select from "react-select"

function App() {
  const options = [
    { value: "apple", label: "Apple" },
    { value: "pineapple", label: "Pineapple" },
    { value: "watermelon", label: "Watermelon" },
  ]

  const customStyles = {
    control: (baseStyles, state) => ({
      ...baseStyles,
      backgroundColor: "#e2e2e2",
    }),
    option: (baseStyles, state) => ({
      ...baseStyles,
      backgroundColor: state.isFocused ? "#e2e2e2" : "",
      color: state.isFocused ? "#333333" : "#FFFFFF",
    }),
    menu: (baseStyles, state) => ({
      ...baseStyles,
      backgroundColor: "#333333",
    }),
  }

  return (
    <div>
      <Select options={options} styles={customStyles} />
    </div>
  )
}

export default App

Obiekt customStyles w TypeScript służy jako repozytorium właściwości stylistycznych dostosowanych specjalnie do różnych komponentów w bibliotece React Select. Style te są zawarte w funkcjach, które akceptują dwa parametry - baseStyles , reprezentujący dziedziczony zestaw domyślnych atrybutów, oraz state , oznaczający bieżącą konfigurację lub stan danego elementu. Dzięki takiemu podejściu programiści mogą z łatwością modyfikować i stosować różne cechy wizualne do elementów Control, Option i Menu komponentu Select.

Parametr baseStyles oznacza standardowe atrybuty projektu dostarczane przez React Select, podczas gdy parametr state oznacza obecny stan komponentu. W tym przypadku oba wykorzystują operator rozprzestrzeniania w tandemie, aby połączyć wyżej wymienione podstawowe funkcje stylizacji wraz z dodatkowymi konfiguracjami wizualnymi dla każdej sekcji interfejsu.

Po wdrożeniu tych dostosowań stylistycznych wybrane pole wejściowe będzie prezentować się jak na poniższym przykładzie:

Dodawanie funkcjonalności do wejść Select

React Select oferuje szereg możliwości, które zwiększają użyteczność elementów select. Wśród nich znajduje się możliwość implementacji funkcji wielokrotnego wyboru i wyszukiwania, a także tworzenia dostosowanych menu rozwijanych.

Funkcjonalność wielokrotnego wyboru

Aby zapewnić użytkownikom możliwość wyboru wielu opcji na liście rozwijanej, można podać atrybut “isMulti” jako parametr elementu Select. W ten sposób użytkownicy będą mogli wybrać więcej niż jedną opcję z wyświetlanych alternatyw.

Na przykład:

 import React from "react"
import Select from "react-select"

function App() {
  const options = [
    { value: "apple", label: "Apple" },
    { value: "pineapple", label: "Pineapple" },
    { value: "watermelon", label: "Watermelon" },
    { value: "grapes", label: "Grapes" },
    { value: "orange", label: "Orange" },
  ]

  return (
    <div>
      <Select options={options} isMulti />
    </div>
  )
}

export default App

Ta ilustracja przedstawia implementację właściwości “isMulti”, która włącza funkcje wielokrotnego wyboru dla wybranych elementów wejściowych.

Funkcjonalność wyszukiwania

Biblioteka React Select oferuje wygodną funkcję wyszukiwania, która jest nieodłącznie zintegrowana z jej komponentem Select. Po otwarciu listy rozwijanej, domyślnym zachowaniem komponentu Select jest wyświetlenie pola wyszukiwania dla natychmiastowego dostępu użytkowników. Następnie użytkownicy mogą wprowadzić żądane zapytanie za pomocą pola wyszukiwania, aby skutecznie zawęzić wyświetlane opcje w oparciu o określone kryteria.

W celu przyznania możliwości wyszukiwania komponentowi Select, należy nadać właściwości “isSearchable” wartość logiczną. Działanie to jest analogiczne do zapewnienia atrybutu “isMulti”, który również wymaga wprowadzenia wartości logicznej.

Rozważmy poniższy fragment kodu, który demonstruje implementację właściwości isSearchable w celu włączenia funkcji wyszukiwania w komponencie React:

 import React from "react"
import Select from "react-select"

function App() {
  const options = [
    { value: "apple", label: "Apple" },
    { value: "apricot", label: "Apricot" },
    { value: "mango", label: "Mango" },
    { value: "mangosteens", label: "Mangosteens" },
    { value: "avocado", label: "Avocado" },
  ]

  return (
    <div>
      <Select options={options} isSearchable />
    </div>
  )
}

export default App

Blok kodu, po wyrenderowaniu, utworzy element HTML typu “select”, który posiada możliwość wyszukiwania za pomocą menu rozwijanego.Wygląd i zachowanie wspomnianego elementu będzie przypominać następującą strukturę:

Tworzenie niestandardowych komponentów rozwijanych

React Select oferuje wszechstronne podejście do tworzenia dostosowanych menu rozwijanych za pośrednictwem swojej właściwości komponentu, umożliwiając użytkownikom modyfikowanie standardowych opcji oferowanych przez React Select za pomocą spersonalizowanych stylów i funkcjonalności, które są zgodne z indywidualnymi preferencjami.

Na przykład:

 import React from "react"
import Select, { components } from "react-select"

function App() {
  const CustomOption = (obj) => (
    <div {...obj.innerProps}>
      <span>{obj.label}</span>
      <span style={{ marginInlineStart: "0.2rem" }}>Fruit</span>
    </div>
  )

  const CustomDropdownIndicator = (props) => (
    <components.DropdownIndicator {...props}>
      <span>&darr;</span>
    </components.DropdownIndicator>
  )

  const options = [
    { value: "apple", label: "Apple" },
    { value: "pineapple", label: "Pineapple" },
    { value: "watermelon", label: "Watermelon" },
  ]

  const customComponents = {
    Option: CustomOption,
    DropdownIndicator: CustomDropdownIndicator,
  }

  return <Select options={options} components={customComponents} />
}

export default App

Podany kod ilustruje proces tworzenia dostosowanych komponentów dla menu rozwijanego przy użyciu właściwości “components” elementu “Select”. Aby to osiągnąć, importuje obiekt “components”, który służy jako nagromadzenie prefabrykowanych komponentów, które ułatwiają personalizację różnych aspektów wizualnych i funkcjonalności związanych z rozwijanymi menu.

CustomOption i CustomDropdownIndicator. Pierwszy z wymienionych komponentów przyjmuje argument w postaci obiektu zawierającego kilka właściwości typowych dla React Select, takich jak innerProps i label.

Komponent CustomDropdownIndicator przyjmuje parametry w postaci prop(s). Jest on odpowiedzialny za renderowanie niestandardowego wskaźnika rozwijanego z ikoną strzałki skierowanej w dół. Aby to osiągnąć, wykorzystuje obiekt customComponents, który ustanawia zgodność między komponentami CustomOption i CustomDropdownIndicator poprzez mapowanie ich na odpowiednie klucze Option i DropdownIndicator.

Ostatecznie skrypt ten przenosi obiekt customComponents do właściwości components elementu Select . W rezultacie generuje dane wejściowe select zawierające niestandardowe komponenty, jak pokazano poniżej:

Standardowe komponenty mogą być bardziej wydajne i atrakcyjne

React Select to zaawansowane narzędzie, które umożliwia programistom tworzenie atrakcyjnych wizualnie i dobrze zaprojektowanych danych wejściowych w ramach Reacta. Biblioteka zapewnia elastyczność w dostosowywaniu wyglądu tych elementów wejściowych i dodawaniu funkcjonalności w celu spełnienia określonych wymagań. Korzystając z React Select, można znacznie poprawić atrakcyjność wizualną i ogólną interakcję użytkownika z aplikacjami React.