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實例，用於需要直接使用它的（罕見）情況