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:

| Prop | Type | Default | Description | | ------------------------ | ----------------------- | --------------- | -------------------------------------------------------------------- | | children | React.ReactNode | null | Custom content to be rendered inside the component. | | items | any[] | [] | Array of items to search through. | | keyId | string | '' | Key to use as the unique identifier for each item. | | excludesKeys | string[] | [] | Array of keys to exclude from the search. | | keysShowValue | string[] | [] | Array of keys whose values should be displayed in the dropdown list. | | searchByKeyAfterSelect | string | '' | Key to use for searching after an item is selected. The key must not match a key from the excludesKeys list. | | separatorValue | string | ', ' | Separator to use for displaying multiple values in the input field. Space must not be used and if children is used - use the same separator as in children. | | value | string | '' | Initial value of the search input. | | debounce | number | 0 | Delay time (in milliseconds) for the search results. | | onSearchResults | function | () => {} | Callback that returns the search results. | | onSelect | function | () => {} | Callback that returns the selected item. | | onLoad | function | () => {} | Callback that returns the loading state. | | onFocus | function | () => {} | Callback that is executed on input focus. | | onBlur | function | () => {} | Callback that is executed on input blur. | | onClear | function | () => {} | Callback that is executed on clear. | | onlyVertexSearch | boolean | false | Whether to search only by vertices, excluding nested arrays. | | autoSearch | boolean | false | Whether to perform the search automatically without a button. | | disabledSelect | boolean | false | Whether to disable selection of items. | | closeOnSelect | boolean | false | Whether to close the dropdown list when an item is selected. | | withClear | boolean | true | Whether to show the clear button. | | withBtn | boolean | true | Whether to show the search button. | | withDropdown | boolean | true | Whether to show the dropdown list of results. | | withLoader | boolean | true | Whether to show the loader. | | disabled | boolean | false | Whether to disable the search input. | | autoFocus | boolean | false | Whether to focus the search input on mount. | | changeDropdownPosition | boolean | true | Whether to change the dropdown position if it rests at the bottom. | | placeholder | string | 'text...' | Placeholder text for the search input. | | label | string | 'Search' | Label text for the search input. | | btnText | string | 'Search' | Text for the search button. | | loaderText | string | 'Loading' | Text for the loader. | | noResultsText | string | 'No results:' | Text to display when there are no search results. | | addClasses | addClassesTypes | {} | Custom CSS classes to apply to the component. |

addClassesTypes

| Class | Type | Default | | ----------------- | ------ | ------- | | wrapper | string | '' | | label | string | '' | | inputForm | string | '' | | input | string | '' | | clear | string | '' | | button | string | '' | | loader | string | '' | | dropdownWrapper | string | '' | | dropdown | string | '' | | dropdownItem | string | '' |

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)

| Arguments | Type | Default | Description | | ------------------ | -------- | ------- | --------------------------------------------------------------------------------- | | list | any[] | [] | An array of elements of any type and nesting. | | value | string | '' | The search query. | | excludesKeys | string[] | [] | An optional array of keys to exclude from the search. | | onlyVertexSearch | boolean | false | A boolean indicating whether to search only by vertices, excluding nested arrays. |

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 [email protected]