Kas ir downshift un kā tas izmantojams React lietotnēs?.

Downshift ir JavaScript bibliotēka, kas paredzēta vienkāršu, elastīgu un WAI-ARIA atbilstošu React autocomplete/combobox vai select dropdown komponentu izveidei. Downshift piedāvā vairākus risinājumus atkarībā no jūsu vajadzībām un izmantošanas gadījumiem. Šajā rakstā mēs apskatīsim, kāpēc jums varētu būt nepieciešams izmantot Downshift, kā tas darbojas un kā to integrēt jūsu React aplikācijā.

Kas ir Downshift un kāpēc to izmantot?

Downshift ir JavaScript bibliotēka, kas sniedz stāvokļa loģiku un lietotāja mijiedarbību autocomplete/combobox vai select dropdown komponentiem.

• Autocomplete/combobox ir ievades lauks, kas piedāvā lietotājam iespējamas vērtības, pamatojoties uz viņa ievadi.
• Select dropdown ir izvēlnes veida komponents, kas ļauj lietotājam izvēlēties vienu vai vairākas vērtības no iepriekš definēta saraksta.

Abi šie komponenti ir bieži sastopami dažādās tīmekļa lietojumprogrammās, piemēram, meklēšanas laukos, filtru paneļos vai formu aizpildīšanai.

Downshift palīdz jums izveidot šos komponentus tā, lai tie būtu pieejami un funkcionāli. Pieejamība nozīmē, ka jūsu komponents ir saprotams un viegli lietojams ar tastatūru vai skata lasītāju. Funkcionalitāte nozīmē, ka jūsu komponents atbilst attiecīgajam ARIA dizaina modelim combobox vai select komponentam.

ARIA (Accessible Rich Internet Applications) ir standarts, kas definē atribūtus un lomu nosaukumus tīmekļa elementiem, lai uzlabotu to pieejamību.

Downshift piedāvā divus veidus, kā izveidot autocomplete/combobox vai select dropdown komponentus:

• React āķus
• Downshift komponentu.

React āķi ir funkcijas, kas ļauj jums piekļūt React stāvoklim un dzīves ciklam bez klases komponentu rakstīšanas. Downshift piedāvā vairākus āķus atkarībā no jūsu vajadzībām:

• useSelect – lai izveidotu pielāgotu select komponentu.
• useCombobox – lai izveidotu combobox/autocomplete ievades lauku.
• useMultipleSelection – lai izvēlētos vairākas vienības select vai combobox komponentos, kā arī dzēstu vienības no izvēles vai navigētu starp izvēlētajiem vienumiem.

Downshift komponents ir render prop komponents, kas arī sniedz loģiku autocomplete/combobox vai select dropdown komponentiem. Render prop ir funkcija, kas tiek nodota kā prop citam komponentam un atgriež React elementu.

Kā iespējams sākt izmantot Downshift un kā to integrēt?

Tātad, kad izstrādājam kādu React aplikāciju un esam sapratuši ka mūsu aplikācijai būs nepieciešams kāds ievades logs ar no tā “izlecošām” ievades iespējām varam integrēt iekš sava Visual Studio Code IDE downshift izmantojot VSC termināli:

npm install --save downshift 

Šī komanda instalēs mūsu React aplikācijā papildus nepieciešamos komponentu failus un downshift kodu būs iespējams izmantot importējot to mūsu aplikācijas galvenē.

import Downshift from 'downshift';

import React from 'react';
import Downshift from 'downshift';
import './App.css';


const items = ['suns', 'kaķis', 'pele'];


function App() {
  return (
    <div className="App">
      <Downshift
        onChange={selection => alert(`Jūs izvēlējāties "${selection}"`)}
        itemToString={item => (item ? item : '')}
      >
        {({
          getInputProps,
          getItemProps,
          getMenuProps,
          isOpen,
          inputValue,
          highlightedIndex,
          selectedItem,
        }) => (
          <div>
            <input {...getInputProps()} />
            <ul {...getMenuProps()}>
              {isOpen
                ? items
                    .filter(item => !inputValue || item.includes(inputValue))
                    .map((item, index) => (
                      <li
                        {...getItemProps({
                          key: item,
                          index,
                          item,
                          style: {
                            backgroundColor:
                              highlightedIndex === index ? 'lightgray' : 'white',
                            fontWeight: selectedItem === item ? 'bold' : 'normal',
                          },
                        })}
                      >
                        {item}
                      </li>
                    ))
                : null}
            </ul>
          </div>
        )}
      </Downshift>
    </div>
  );
}


export default App;

.App {
  font-family: sans-serif;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  border: 2px solid #271c1c;
  padding: 2em;
}


input {
  font-size: 1.5em;
  padding: 0.5em;
  margin: 0.5em;
}


input:focus {
  outline: none;
  border-bottom-color: #ff7f50;
}


ul {
  list-style: none;
  margin: 0;
  padding: 0;
}


li {
  padding: 0.5em;
  cursor: pointer;
}


li:hover {
  background-color: #771111;
}

Downshift GitHub lapa: