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 >
)

제공되는 소품:

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 과 동일하지만 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 인스턴스