react minisearch Télécharger - react minisearch Téléchargement du code source

react minisearch

Autre code source

1.0.0

Télécharger

Réagir à MiniSearch

Intégration de React pour la bibliothèque de recherche en texte intégral côté client MiniSearch.

Commencer

Installation:

Tout d’abord, assurez-vous d’avoir installé une version compatible de React et de MiniSearch.

Ensuite, installez via NPM ou Yarn :

 # With NPM:
npm install react-minisearch

# Or with Yarn:
yarn add react-minisearch

Usage:

Il existe trois manières principales d'utiliser react-minisearch : le hook useMiniSearch , le composant d'ordre supérieur withMiniSearch ou le composant wrapper WithMiniSearch .

Les trois méthodes prennent les arguments suivants (ou accessoires pour le composant wrapper) :

Collection initiale de documents à ajouter à l'index. Remarque : il ne s'agit que de la collection initiale et la mutation de cet argument n'entraînera pas de réindexation. Pour ajouter ou supprimer des documents après initialisation, utilisez les fonctions add / addAll / remove / removeAll / discard , etc.
Les options de configuration MiniSearch

Utilisation du hook useMiniSearch :

 import { useMiniSearch } from 'react-minisearch'

// Documents to search amongst
const documents = [
  { id : 1 , name : 'Agata' } ,
  { id : 2 , name : 'Finn' } ,
  // …etc
]

// See MiniSearch for documentation on options
const miniSearchOptions = { fields : [ 'name' ] }

const MyComponent = ( ) => {
  const { search , searchResults } = useMiniSearch ( documents , miniSearchOptions )

  const handleSearchChange = ( event ) => {
    search ( event . target . value )
  }

  return (
    < div >
      < input type = 'text' onChange = { handleSearchChange } placeholder = 'Search…' / >

      < ol >
        < h3 > Results: < / h3 >
        {
          searchResults && searchResults . map ( ( result , i ) => {
            return < li key = { i } > { result . name } < / li >
          } )
        }
      < / ol >
    < / div >
  )
}

Utilisation du composant d'ordre supérieur withMiniSearch :

 import { withMiniSearch } from 'react-minisearch'

const MyComponent = ( { search , searchResults } ) => {

  const handleSearchChange = ( event ) => {
    search ( event . target . value )
  }

  return (
    < div >
      < input type = 'text' onChange = { handleSearchChange } placeholder = 'Search…' / >

      < ol >
        < h3 > Results: < / h3 >
        {
          searchResults && searchResults . map ( ( result , i ) => {
            return < li key = { i } > { result . name } < / li >
          } )
        }
      < / ol >
    < / div >
  )
}

// Documents to search amongst
const documents = [
  { id : 1 , name : 'Agata' } ,
  { id : 2 , name : 'Finn' } ,
  // …etc
]

// See MiniSearch for documentation on options
const miniSearchOptions = { fields : [ 'name' ] }

const MyComponentWithSearch = withMiniSearch ( documents , miniSearchOptions , MyComponent )

Utilisation du composant wrapper WithMiniSearch :

 import { WithMiniSearch } from 'react-minisearch'

// Documents to search amongst
const documents = [
  { id : 1 , name : 'Agata' } ,
  { id : 2 , name : 'Finn' } ,
  // …etc
]

// See MiniSearch for documentation on options
const miniSearchOptions = { fields : [ 'name' ] }

const MyComponent = ( ) => (
  < WithMiniSearch documents = { documents } options = { miniSearchOptions } >
    {
      ( { search , searchResults } ) => {
        const handleSearchChange = ( event ) => {
          search ( event . target . value )
        }

        return (
          < div >
            < input type = 'text' onChange = { handleSearchChange } placeholder = 'Search…' / >

            < ol >
              < h3 > Results: < / h3 >
              {
                searchResults && searchResults . map ( ( result , i ) => {
                  return < li key = { i } > { result . name } < / li >
                } )
              }
            < / ol >
          < / div >
        )
      }
    }
  < / WithMiniSearch >
)

Accessoires fournis :

L'ensemble complet d'accessoires fournis par react-minisearch est le même pour les trois méthodes ( useMiniSearch , withMiniSearch ou WithMiniSearch ) :

search(query: string, searchOptions?: SearchOptions) => void : fonction à appeler afin d'effectuer la recherche
searchResults: T[] | null : tableau de résultats de recherche, ou null lorsqu'aucune recherche n'a été effectuée ou que la recherche a été effacée
rawResults: SearchResult[] | null : tableau des résultats de recherche bruts de MiniSearch, y compris les scores et les informations de correspondance, ou null lorsqu'aucune recherche n'a été effectuée ou que la recherche a été effacée
clearSearch() => void : fonction à appeler afin d'effacer la recherche (en définissant searchResults sur null )
autoSuggest(query: string, searchOptions?: SearchOptions) => void : fonction à appeler afin d'obtenir des suggestions automatiques
suggestions: Suggestion[] | null : tableau de suggestions automatiques, ou null lorsque les suggestions automatiques ne sont pas utilisées ou effacées
clearSuggestions() => void : fonction à appeler afin d'effacer les suggestions (définir suggestions sur null )
add(document: T) => void : fonction pour ajouter un nouveau document à l'index
addAll(documents: T[]) => void : fonction pour ajouter plusieurs nouveaux documents à l'index en masse
addAllAsync(documents: T[], options?: object) => Promise<void> : identique à addAll , mais fonctionne de manière asynchrone et par lots pour éviter de bloquer l'interface utilisateur
remove(document: T) => void : fonction pour supprimer un document de l'index
removeById(id: any) => void : fonction pour supprimer un document de l'index par son ID
removeAll(documents?: T[]) => void : fonction pour supprimer plusieurs documents, ou tous les documents, de l'index
discard(id: any) => void : supprime un document par son ID (identique à removeById )
discardAll(ids: readonly any[]) => void : supprime plusieurs documents à la fois, par leur ID
replace(document: T) => void : remplace un document existant par une nouvelle version de celui-ci
isIndexing: boolean : défini sur true lorsque l'indexation via addAllAsync est en cours, false sinon
miniSearch: MiniSearch : l'instance MiniSearch , pour les (rares) cas où il faut l'utiliser directement