This Crow will find everything
npm install react-search-crowReact Search Crow

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.
- 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
```
npm install react-search-crow
`javascript
import { SearchCrow } from 'react-search-crow'
const MyComponent = () => {
const handleSearchResults = (results) => {
// Handle {search} results
}
const handleSelect = (item) => {
// Handle {item} selection
}
return (
onSearchResults={handleSearchResults}
onSelect={handleSelect}
// ...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. |
| Class | Type | Default |
| ----------------- | ------ | ------- |
| wrapper | string | '' |label
| | string | '' |inputForm
| | string | '' |input
| | string | '' |clear
| | string | '' |button
| | string | '' |loader
| | string | '' |dropdownWrapper
| | string | '' |dropdown
| | string | '' |dropdownItem
| | string | '' |
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:
`javascript
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.
```
react: 18.3.1
typescript: 4.9.5
node: >=14.0.0
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