react minisearch下载 - react minisearch源码下载

react minisearch

其他源码

1.0.0

下载

反应迷你搜索

MiniSearch 客户端全文搜索库的 React 集成。

入门

安装：

首先，确保您安装了 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 >
)

提供道具：

对于所有三种方式（ useMiniSearch 、 withMiniSearch或WithMiniSearch ）， react-minisearch提供的完整 props 集都是相同的：

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相同，但异步且批量工作以避免阻塞 UI
remove(document: T) => void ：从索引中删除文档的函数
removeById(id: any) => void ：通过 ID 从索引中删除文档的函数
removeAll(documents?: T[]) => void ：从索引中删除多个文档或所有文档的函数
discard(id: any) => void ：按 ID 丢弃文档（与removeById相同）
discardAll(ids: readonly any[]) => void ：按 ID 一次性丢弃多个文档
replace(document: T) => void ：用新版本替换现有文档
isIndexing: boolean : 当通过addAllAsync进行索引时设置为true ，否则设置为false
miniSearch: MiniSearch ： MiniSearch实例，用于需要直接使用它的（罕见）情况