Descargar react minisearch - descargar código fuente react minisearch

react minisearch

Otro código fuente

1.0.0

Descargar

Reaccionar minibúsqueda

Integración de React para la biblioteca de búsqueda de texto completo del lado del cliente MiniSearch.

Empezando

Instalación:

Primero, asegúrese de tener instalada una versión compatible de React y MiniSearch.

Luego, instale a través de NPM o Yarn :

 # With NPM:
npm install react-minisearch

# Or with Yarn:
yarn add react-minisearch

Uso:

Hay tres formas principales de utilizar react-minisearch : el gancho useMiniSearch , el componente de orden superior withMiniSearch o el componente contenedor WithMiniSearch .

Las tres vías toman los siguientes argumentos (o accesorios para el componente contenedor):

La colección inicial de documentos para agregar al índice. Nota: esta es solo la colección inicial y la mutación de este argumento no provocará la reindexación. Para agregar o eliminar documentos después de la inicialización, use las funciones add / addAll / remove / removeAll / discard , etc.
Las opciones de configuración MiniSearch

Usando el 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 el componente de orden 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 el componente contenedor 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 >
)

Accesorios proporcionados:

El conjunto completo de accesorios que proporciona react-minisearch es el mismo para las tres formas ( useMiniSearch , withMiniSearch o WithMiniSearch ):

search(query: string, searchOptions?: SearchOptions) => void : función que se llamará para realizar la búsqueda
searchResults: T[] | null : conjunto de resultados de búsqueda, o null cuando no se realizó ninguna búsqueda o se borró la búsqueda
rawResults: SearchResult[] | null : conjunto de resultados de búsqueda sin procesar de MiniSearch, incluidas puntuaciones e información de coincidencias, o null cuando no se realizó ninguna búsqueda o se borró la búsqueda.
clearSearch() => void : función que se llamará para borrar la búsqueda (configurando searchResults en null )
autoSuggest(query: string, searchOptions?: SearchOptions) => void : función que se llamará para obtener sugerencias automáticas
suggestions: Suggestion[] | null : conjunto de sugerencias automáticas, o null cuando las sugerencias automáticas no se utilizan o se borran
clearSuggestions() => void : función que se llamará para borrar las sugerencias (configurando suggestions en null )
add(document: T) => void : función para agregar un nuevo documento al índice
addAll(documents: T[]) => void : función para agregar varios documentos nuevos al índice de forma masiva
addAllAsync(documents: T[], options?: object) => Promise<void> : igual que addAll , pero funciona de forma asíncrona y en lotes para evitar bloquear la interfaz de usuario
remove(document: T) => void : función para eliminar un documento del índice
removeById(id: any) => void : función para eliminar un documento del índice por su ID
removeAll(documents?: T[]) => void : función para eliminar varios documentos, o todos los documentos, del índice
discard(id: any) => void : descartar un documento por su ID (igual que removeById )
discardAll(ids: readonly any[]) => void : descarta varios documentos a la vez, por su ID
replace(document: T) => void : reemplaza un documento existente con una nueva versión del mismo
isIndexing: boolean : se establece en true cuando la indexación a través de addAllAsync está en curso; en caso contrario, false
miniSearch: MiniSearch : la instancia MiniSearch , para los (raros) casos en los que es necesario utilizarla directamente