Instantsearch React UI-Komponentenbibliothek

Was ist Algolia?

Algolia ermöglicht es modernen Entwicklern, ohne DevOps erstklassige Such- und Entdeckungserlebnisse zu schaffen.
Bibliotheken für alle gängigen Sprachen und Frameworks erleichtern es Ihnen, die Benutzererfahrung zu verbessern.

Fügen Sie Ihren React-Anwendungen die Autovervollständigung hinzu

Die React InstantSearch UI-Bibliothek besteht aus vorgefertigten, anpassbaren und flexiblen UI-Widgets, mit denen Sie Ihre eigenen Sucherlebnisse erstellen können –entdecken Sie die Showcase-Beispiele. Sie verfügt über serverseitige Rendering- und Routing-Funktionen, ist Open Source, produktionsreif und wird von Algolia gepflegt.

Funktionen

Bietet vorgefertigte UI-Komponenten gemäß den Best-Practice-Prinzipien für React, die unabhängig von externen Frameworks bleiben.
Integrieren Sie es in Ihre bestehende Benutzeroberfläche oder App oder verwenden Sie InstantSearch-Vorlagen.
Mit einem standardmäßigen CSS-Theme, vollständig anpassbar
Verwaltet die gesamte Geschäftslogik für Suchanfragen, Antworten und Statusmeldungen.
Progressive Anpassung von Komponenten (verwenden, erweitern oder anpassen)

Version

Kompatibel mit allen aktuellen Versionen der zugrunde liegenden React-Bibliothek
Der Code ist vollständig Open Source und auf GitHub verfügbar.
Starten Sie Ihre Anwendung mit create-instantsearch-app, NPM, ...

Loslegen

CSS (HIER KOSTENLOSES KONTO ERÖFFNEN)

          
            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; }

IMPORT-KOMPONENTEN

          
            import {

  InstantSearch,

  Highlight,

  Hits,

  SearchBox,

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

SUCHEN

          
            // 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>

  );

}

React + Algolia

Was ist Algolia?

Fügen Sie Ihren React-Anwendungen die Autovervollständigung hinzu

Funktionen

Version

Verwandte Integrationen

Loslegen

Entwickeln Sie beeindruckende Suchfunktionen.