Bibliothèque de composants d'interface utilisateur pour Elasticsearch, OpenSearch, Solr, MongoDB : disponible pour React et Vue
Découvrez comment créer une interface utilisateur de recherche pour le commerce électronique
a.) avec React, ou b.) avec Vue
Consultez Searchbox si vous créez des interfaces utilisateur de recherche pour d'autres frameworks JS, React Native ou Flutter.
Consultez le marché ReactiveSearch sur reactiveapps.io.
Modèles de concepteur Web pour croquis.
Modèles de concepteur iOS et Android pour croquis.
ReactiveSearch est une bibliothèque de composants d'interface utilisateur pour React et Vue, conçue pour fonctionner avec le cloud ReactiveSearch. Il contient plus de 20 composants d'interface utilisateur comprenant des listes, des plages, des interfaces utilisateur de recherche, des affichages de résultats, des réponses AI, des graphiques et un moyen d'introduire un composant d'interface utilisateur existant dans la bibliothèque.
Un composant d'interface utilisateur peut être utilisé pour filtrer ou effectuer une recherche sur l'index. Par exemple:
SingleList applique un filtre de correspondance exacte en fonction de l'élément sélectionné.RangeSlider applique une requête de plage numérique basée sur les valeurs sélectionnées dans l'interface utilisateur.SearchBox applique des suggestions et une requête de recherche en fonction du terme de recherche saisi par l'utilisateur. Les composants de l'interface utilisateur peuvent être utilisés ensemble ( react prop permet de configurer cela au niveau de chaque composant) et de restituer les résultats correspondants via un composant d'interface utilisateur d'affichage des résultats.
ReactiveSearch prend en charge les composants d'affichage intégrés suivants pour afficher les résultats (appelés hits) :
react des composants d'interface utilisateur permettent de créer des interfaces utilisateur complexes dans lesquelles un certain nombre de composants d'interface utilisateur peuvent être mis à jour de manière réactive en fonction de l'interaction de l'utilisateur.className`` and innerClass`.ThemeProvider .À partir de ReactiveSearch v4 (version majeure actuelle), la bibliothèque envoie uniquement l'intention de recherche, la spécification pour cela est ici - API ReactiveSearch réf. En fonction du choix du moteur de recherche que vous configurez dans le cloud ReactiveSearch, la requête de recherche DSL est ensuite générée par le cloud ReactiveSearch. Cette approche est à la fois plus sécurisée et permet de transférer la logique métier de recherche côté serveur.
Si vous utilisez ReactiveSearch v3 (dernière version majeure), l'utilisation de l'API ReactiveSearch sur la requête DSL d'ElasticSearch est une fonctionnalité facultative. Vous devez définir la prop enableAppbase sur true dans votre composant ReactiveBase . Cela suppose que vous utilisez appbase.io pour votre backend.
Nous vous recommandons de consulter cette application KitchenSink qui démontre l'utilisation de l' ReactiveSearch API pour tous les composants ReactiveSearch.
⬆ Retour en haut
Essayez les histoires de jeux en direct sur Playground. Recherchez la section des boutons dans la partie terrain de jeu des histoires pour peaufiner chaque accessoire et voir les effets.
Un ensemble de démos en direct inspirées d'applications du monde réel, créées avec ReactiveSearch.
Vous pouvez tous les vérifier dans la section exemples du site Web.
⬆ Retour en haut
Ici, nous partageons comment ReactiveSearch se compare à d'autres projets ayant des objectifs similaires.
| # | Recherche réactive | Kit de recherche | Recherche instantanée |
|---|---|---|---|
| Back-end | Elasticsearch, OpenSearch, Solr, MongoDB, OpenAI | Tout index Elasticsearch hébergé sur n'importe quel cluster Elasticsearch. | Conçu sur mesure pour Algolia, un moteur de recherche propriétaire. |
| Développement | Activement développé et entretenu. | Réponses actives aux problèmes, quelques développements et maintenance. | Activement développé et entretenu. |
| Expérience d'intégration | Applications de démarrage, didacticiel interactif en direct, guide de démarrage, terrain de jeu des composants, chaque composant dispose d'une démo de travail en direct avec codesandbox. | Tutoriel de démarrage, pas de démonstrations de composants en direct, spécifications de référence clairsemées pour de nombreux composants. | Applications de démarrage, guide de démarrage, terrain de jeu de composants. |
| Prise en charge du style | Composants stylisés et étendus. Aucune importation CSS externe requise. Thèmes riches pris en charge en tant qu'accessoires React. | Styles basés sur CSS avec BEM, non limités aux composants. Thématisation prise en charge avec SCSS. | Les styles basés sur CSS nécessitent une importation de style externe. Thématisation prise en charge par la manipulation de CSS. |
| Types de composants | Listes, plages, recherche, dates, cartes, affichages des résultats. Peut utiliser vos propres composants d’interface utilisateur. | Listes, plages, recherche*, résultat*. Vous ne pouvez pas utiliser vos propres composants d'interface utilisateur. (Un seul composant pour la recherche et le résultat, ce qui entraîne l'écriture de plus de code pour la personnalisation) | Listes, plage, recherche, résultat. Peut utiliser vos propres composants d'interface utilisateur. |
| Plateformes de distribution prises en charge | React, Vue pour le Web, React Native pour mobile. | Réagissez pour le Web. | React, Vue, Angular, vanilla JS pour le Web, React Native pour mobile mais ce dernier n'a pas de composants d'interface utilisateur. |
Nous apprécions les contributions à cette section. Si vous construisez un projet ou si vous connaissez un autre projet dans un espace similaire, faites-le-nous savoir et nous mettrons à jour les comparaisons.
⬆ Retour en haut
L'installation de ReactiveSearch n'est qu'une commande.
npm install @ appbaseio / reactivesearchVous pouvez consulter le guide de démarrage rapide avec React ici.
npm install @ appbaseio / reactivesearch - vueVous pouvez consulter le guide de démarrage rapide avec Vue ici.
Les documents officiels de la bibliothèque React se trouvent sur docs.reactivesearch.io/docs/reactivesearch/react.
Les composants sont divisés en quatre sections :
La version Docs pour Vue de la bibliothèque est disponible sur docs.reactivesearch.io/docs/reactivesearch/vue.
⬆ Retour en haut
Veuillez consulter le guide des contributions.
API ReactiveSearch Passerelle API pour ElasticSearch, OpenSearch, Solr, MongoDB, OpenAI (sécurité prête à l'emploi, fonctionnalités de limite de débit, analyses d'enregistrement et journaux de demandes).
searchbox Une bibliothèque d'interface utilisateur de searchbox légère et axée sur les performances pour interroger et afficher les résultats avec ReactiveSearch Cloud.
dejavu Visualiseur et éditeur de données Elasticsearch / OpenSearch
appbase-js Lorsque vous devez indexer des données en plus des composants de l'interface utilisateur
⬆ Retour en haut
