Libreria di componenti UI Instantsearch per React

Cos’è Algolia

Algolia consente agli sviluppatori moderni di creare esperienze di ricerca e scoperta di altissimo livello senza ricorrere al DevOps.
Le librerie disponibili per tutti i principali linguaggi e framework semplificano l'arricchimento dell'esperienza dei tuoi utenti.

Aggiungi la funzione di completamento automatico alle tue applicazioni React

La libreria React InstantSearch UI offre widget predefiniti, personalizzabili e flessibili per creare esperienze di ricerca personalizzate:scopri la galleria. Dispone di funzionalità di rendering lato server e di routing; è open source, pronta per l'uso in produzione e gestita da Algolia.

Caratteristiche

Fornisce componenti dell'interfaccia utente predefiniti, realizzati secondo i principi delle best practice di React, che rimangono indipendenti dai framework esterni
Integralo nella tua interfaccia utente o app esistente, oppure utilizza i modelli di InstantSearch
Include un tema CSS predefinito, completamente personalizzabile
Gestisce tutta la logica di business relativa alle richieste di ricerca, alle risposte e agli stati
Personalizzazione progressiva dei componenti (utilizzo, estensione o personalizzazione)

Versione

Compatibile con tutte le versioni attuali della libreria React sottostante
Il codice è interamente open source e disponibile su GitHub
Avvia la tua applicazione con create-instantsearch-app, NPM, ...

Integrazioni correlate

Funziona conil completamento automatico
E con tutti i nostriclient APIeframework

Link importanti

Inizia

CSS (CREA UN ACCOUNT GRATUITOQUI)

          
            body { font-family: sans-serif; padding: 1em; }

.ais-SearchBox { margin: 1em 0; }

.ais-Pagination { margin-top: 1em }

.left-panel { float: left; width: 250px; }

.right-panel { margin-left: 260px; }

COMPONENTI DI IMPORTAZIONE

          
            import {

  InstantSearch,

  Highlight,

  Hits,

  SearchBox,

} from 'react-instantsearch-hooks-web';

RICERCA

          
            // Create the App component

class App extends Component {

  render() {

    return (

      <div className="ais-InstantSearch">

        <h1>React InstantSearch e-commerce demo</h1>

        <InstantSearch indexName="demo_ecommerce" searchClient={searchClient}>

          <div className="right-panel">

            <SearchBox />

            <Hits hitComponent={Hit} />

          </div>

        </InstantSearch>

      </div>

    );

  }

}



function Hit(props) {

  return (

    <div>

      <img src={props.hit.image} align="left" alt={props.hit.name} />

      <div className="hit-name">

        <Highlight attribute="name" hit={props.hit} />

      </div>

      <div className="hit-description">

        <Highlight attribute="description" hit={props.hit} />

      </div>

      <div className="hit-price">${props.hit.price}</div>

    </div>

  );

}

Assistenza Algolia

Come posso aiutarti oggi?

React + Algolia