Better Select: un Web component per le select HTML

Better Select è una libreria basata su JavaScript che semplifica la creazione di select nelle pagine HTML. Disponibile sotto licenza Open Source su GitHub esso offre un Web component per l'inizializzazione, la possibilità di interagire tramite tastiera con gli elementi selezionati e il supporto opzionale per il fallback alle select native su mobile. Uno dei vantaggi di questa soluzione risiede nel fatto che esse non richiede librerie esterne per il suo funzionamento, come per esempio jQuery. È comunque disponibile un apposito adapter per quest'ultimo.

Installazione di Better Select

Better Select può essere installato sia tramite npm che utilizzando yarn. Nel primo caso è sufficiente lanciare la seguente istruzione:

npm install --save @smartimpact-it/better-select

Se invece si preferisce optare per yarn è possibile utilizzare il seguente comando:

yarn add @smartimpact-it/better-select

Utilizzo di Better Select come Web component

Come anticipato, la libreria garantisce un'inizializzazione più performante quando utilizzata sotto forma di Web component. In questo caso è però necessario registrare il componente. Si parte quindi dalla creazione della select:

<better-select>
  <select name="select" id="select1" class="form-control">
    <option value="a">PHP</option>
    <option value="b">JS</option>
    <option value="c">HTML</option>
    <option value="d">CSS</option>
  </select>
</better-select>

Per poi registrare il componente in JavaScript tramite importazione:

import { registerWebComponent } from '@smartimpact-it/better-select';
registerWebComponent();

Attributi per il Web component

Se utilizzato come Web component, Better Select mette a disposizione una serie di attributi con cui perfezionare le select realizzate. Il loro elenco con i relativi valori è presente nella documentazione ufficiale della libreria. Si tratta in sostanza di opzioni come placeholder (settata di default su null), per mostrare un testo quando non viene selezionata alcuna opzione, o no-native-on-mobile (settata di default su false), per rendere visibile la select dropdown originale su mobile.

Si può comunque utilizzare Better Select senza sfruttare il Web component. In questo caso le alternative sono appunto JavaScript puro e la già citata jQuery. Se si sceglie la seconda opzione bisogna tenere conto che il nome degli attributi potrebbe cambiare. I riferimenti necessari sono comunque presenti nella documentazione ufficiale.