Baixar react minisearch - react minisearch Download do código-fonte

react minisearch

Outro código-fonte

1.0.0

Baixar

Reagir MiniSearch

Integração React para a biblioteca de pesquisa de texto completo do lado do cliente MiniSearch.

Começando

Instalação:

Primeiro, certifique-se de ter uma versão compatível do React e do MiniSearch instalada.

Em seguida, instale via NPM ou Yarn :

 # With NPM:
npm install react-minisearch

# Or with Yarn:
yarn add react-minisearch

Uso:

Existem três maneiras principais de usar react-minisearch : o gancho useMiniSearch , o componente de ordem superior withMiniSearch ou o componente wrapper WithMiniSearch .

Todas as três formas recebem os seguintes argumentos (ou adereços para o componente wrapper):

A coleção inicial de documentos a serem adicionados ao índice. Nota: esta é apenas a coleção inicial e a mutação deste argumento não causará reindexação. Para adicionar ou remover documentos após a inicialização, use as funções add / addAll / remove / removeAll / discard , etc.
As opções de configuração MiniSearch

Usando o gancho 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 >
  )
}

Usando o componente de ordem superior 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 )

Usando o componente 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 >
)

Adereços fornecidos:

O conjunto completo de adereços fornecidos pelo react-minisearch é o mesmo para todas as três formas ( useMiniSearch , withMiniSearch ou WithMiniSearch ):

search(query: string, searchOptions?: SearchOptions) => void : função a ser chamada para realizar a pesquisa
searchResults: T[] | null : matriz de resultados da pesquisa ou null quando nenhuma pesquisa foi realizada ou a pesquisa foi apagada
rawResults: SearchResult[] | null : array de resultados brutos de pesquisa do MiniSearch, incluindo pontuações e informações de correspondência, ou null quando nenhuma pesquisa foi realizada ou a pesquisa foi apagada
clearSearch() => void : função a ser chamada para limpar a pesquisa (definindo searchResults como null )
autoSuggest(query: string, searchOptions?: SearchOptions) => void : função a ser chamada para obter sugestões automáticas
suggestions: Suggestion[] | null : matriz de sugestões automáticas ou null quando as sugestões automáticas não são usadas ou limpas
clearSuggestions() => void : função a ser chamada para limpar as sugestões (definindo suggestions como null )
add(document: T) => void : função para adicionar um novo documento ao índice
addAll(documents: T[]) => void : função para adicionar vários novos documentos ao índice em massa
addAllAsync(documents: T[], options?: object) => Promise<void> : igual a addAll , mas funciona de forma assíncrona e em lotes para evitar o bloqueio da UI
remove(document: T) => void : função para remover um documento do índice
removeById(id: any) => void : função para remover um documento do índice pelo seu ID
removeAll(documents?: T[]) => void : função para remover vários documentos, ou todos os documentos, do índice
discard(id: any) => void : descarta um documento pelo seu ID (o mesmo que removeById )
discardAll(ids: readonly any[]) => void : descarta vários documentos de uma vez, pelo seu ID
replace(document: T) => void : substitui um documento existente por uma nova versão dele
isIndexing: boolean : definido como true quando a indexação via addAllAsync está em andamento, false caso contrário
miniSearch: MiniSearch : a instância MiniSearch , para os (raros) casos em que é necessário usá-lo diretamente