react-search-crow v0.4.0

react-search-crow

React Search Crow

SearchCrow Component

The SearchCrow component is a React component that provides a search functionality with a dropdown list of results. It allows you to customize various aspects of the search behavior and appearance.

Features

• It is capable of searching for any type of array and any nesting
• Allows you to pass your own list of items to search through
• Supports searching excluding certain keys, and displaying specific keys in the dropdown list
• Provides callbacks for search results, item selection, loading state, focus/blur events, and clear events
• Supports buttonless search, disabled selection, closing the list on selection, and showing/hiding various UI elements
• Allows customizing the placeholder, label, button text, loader text, and no results text
• Supports changing the dropdown position if it rests at the bottom of the window

Install

npm install react-search-crow

Usage

import { SearchCrow } from 'react-search-crow'

const MyComponent = () => {
  const handleSearchResults = (results) => {
    // Handle {search} results
  }
  const handleSelect = (item) => {
    // Handle {item} selection
  }

  return (
    <SearchCrow
      items={[...]}
      onSearchResults={handleSearchResults}
      onSelect={handleSelect}
      // ...props
    />
  )
}

Props

The SearchCrow component accepts the following props:

addClassesTypes

SearchCrow Function

The onSearchCrow function is a utility function that can be used to perform a search on a list of items. It takes the following parameters:

Usage

import { onSearchCrow } from 'react-search-crow'

onSearchCrow([...], 'search text' ['id'], false)

The function returns an array of items that match the search query.

You can use this function for your own search or sort arrays by found values.

Engines

react: 18.3.1
typescript: 4.9.5
node: >=14.0.0

Contribution

If you find any problems or have suggestions for improvement:

• Feel free to submit a pull request.
• Create issues.
• Email me at german.work11@gmail.com