Скачать react minisearch - скачать исходный код react minisearch

react minisearch

Другой исходный код

1.0.0

Скачать

Реагировать на минипоиск

Интеграция React для клиентской библиотеки полнотекстового поиска MiniSearch.

Начиная

Установка:

Сначала убедитесь, что у вас установлены совместимая версия React и MiniSearch.

Затем установите через NPM или Yarn :

 # With NPM:
npm install react-minisearch

# Or with Yarn:
yarn add react-minisearch

Использование:

Существует три основных способа использования react-minisearch : хук useMiniSearch , компонент высшего порядка withMiniSearch или компонент-оболочка WithMiniSearch .

Все три способа принимают следующие аргументы (или реквизиты для компонента-оболочки):

Начальная коллекция документов для добавления в индекс. Примечание. Это всего лишь исходная коллекция, и изменение этого аргумента не приведет к переиндексации. Для добавления или удаления документов после инициализации используйте функции add / addAll / remove / removeAll / discard и т.д.
Параметры конфигурации MiniSearch

Используя хук 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 >
  )
}

Использование компонента высшего порядка 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 )

Использование компонента-оболочки 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 >
)

Предоставляемый реквизит:

Полный набор реквизитов, предоставляемых react-minisearch одинаков для всех трех способов ( useMiniSearch , withMiniSearch или WithMiniSearch ):

search(query: string, searchOptions?: SearchOptions) => void : функция, которую нужно вызвать для выполнения поиска
searchResults: T[] | null : массив результатов поиска или null , если поиск не выполнялся или поиск был очищен.
rawResults: SearchResult[] | null : массив необработанных результатов поиска из MiniSearch, включая оценки и информацию о совпадениях, или null если поиск не выполнялся или поиск был очищен.
clearSearch() => void : функция, которую нужно вызвать для очистки поиска (установка searchResults значения null )
autoSuggest(query: string, searchOptions?: SearchOptions) => void : функция, вызываемая для получения автоматических предложений
suggestions: Suggestion[] | null : массив автоматических предложений или null , если автоматические предложения не используются или удаляются.
clearSuggestions() => void : функция, которую нужно вызвать для очистки предложений (установка suggestions значения null )
add(document: T) => void : функция для добавления нового документа в индекс.
addAll(documents: T[]) => void : функция для массового добавления нескольких новых документов в индекс.
addAllAsync(documents: T[], options?: object) => Promise<void> : то же, что и addAll , но работает асинхронно и пакетно, чтобы избежать блокировки пользовательского интерфейса.
remove(document: T) => void : функция для удаления документа из индекса
removeById(id: any) => void : функция для удаления документа из индекса по его идентификатору.
removeAll(documents?: T[]) => void : функция для удаления нескольких документов или всех документов из индекса.
discard(id: any) => void : удалить документ по его идентификатору (так же, как и removeById )
discardAll(ids: readonly any[]) => void : удалить сразу несколько документов по их идентификатору
replace(document: T) => void : заменить существующий документ новой версией.
isIndexing: boolean : установлено значение true , когда выполняется индексирование через addAllAsync , в противном случае — false
miniSearch: MiniSearch : экземпляр MiniSearch для (редких) случаев, когда необходимо использовать его напрямую.