Bibliothèque de composants React UI Instantsearch

Qu'est-ce qu'Algolia ?

Algolia permet aux développeurs modernes de créer des expériences de recherche et de découverte de classe mondiale sans aucun DevOps.
Les bibliothèques compatibles avec tous les principaux langages et frameworks facilitent l'enrichissement de l'expérience utilisateur.

Ajoutez la saisie semi-automatique à vos applications React

La bibliothèque d'interface utilisateur React InstantSearch propose des widgets pré-construits, personnalisables et flexibles pour créer vos propres expériences de recherche ; découvrez-en plus dans la démo . Elle intègre le rendu côté serveur et le routage, est open source, prête pour la production et maintenue par Algolia.

Caractéristiques

Fournit des composants d'interface utilisateur pré-construits, conformes aux meilleures pratiques pour React et indépendants des frameworks externes.
Intégrez-le à votre interface utilisateur ou application existante, ou utilisez les modèles InstantSearch.
Livré avec un thème CSS par défaut, entièrement personnalisable
Gère toute la logique métier des requêtes de recherche, des réponses et des états
Personnalisation progressive des composants (utiliser, étendre ou personnaliser)

Version

Compatible avec toutes les versions actuelles de la bibliothèque React sous-jacente
Le code est entièrement open source et disponible sur GitHub
Démarrez votre application avec create-instantsearch-app, NPM, ...

Intégrations associées

Fonctionne avec la saisie semi-automatique
Et avec tous nos clients et frameworks API

Liens clés

Commencer gratuitement

CSS (CRÉEZ UN COMPTE GRATUIT ICI )

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

COMPOSANTS D'IMPORTATION

          
            import {

  InstantSearch,

  Highlight,

  Hits,

  SearchBox,

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

RECHERCHE

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