You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+31-34Lines changed: 31 additions & 34 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,4 +1,3 @@
1
-
<<<<<<< HEAD
2
1
# React API Search
3
2
4
3
A highly customizable, debounce-enabled, and fully-featured React API Search component designed to fetch and display search results asynchronously. Ideal for scenarios where the search query is used to fetch data from APIs or databases, with built-in support for loading, error handling, and no-result states.
| placeholder | string | Placeholder text for the input field. | 'Search...' |
69
+
| fetchData | (query: string) => Promise<T[]> | A function that fetches data based on the search query. | N/A |
70
+
| renderItem | (item: T) => JSX.Element | A function to render each search result item. | N/A |
71
+
| onSelect | (item: T) => void | A callback function triggered when a user selects an item. | undefined |
72
+
| loadingElement | JSX.Element | JSX to display while results are loading. |`<div>Loading...</div>`|
73
+
| emptyElement | JSX.Element | JSX to display when no results are found. |`<div>No results found</div>`|
74
+
| errorElement | JSX.Element | JSX to display when an error occurs. |`<div>Something went wrong</div>`|
75
+
| debounceDelay | number | The debounce delay in milliseconds. | 500 |
76
+
| containerClassName | string | Custom class for the search bar container. | undefined |
77
+
| inputClassName | string | Custom class for the input field. | undefined |
78
+
| dropdownClassName | string | Custom class for the dropdown containing search results. | undefined |
79
+
| itemClassName | string | Custom class for each search result item. | undefined |
80
+
| hideSearchIcon | boolean | Whether to hide the search icon. | false |
81
+
| searchIconClassName | string | Custom class for the search icon. | undefined |
82
+
| closeIconClassName | string | Custom class for the close icon. | undefined |
83
+
| inputFontColor | string | Font color of the input field. |#000|
84
+
| inputBorderRadius | string | Border radius of the input field. | '8px' |
85
+
| inputBorderColor | string | Border color of the input field. | #ccc |
86
+
| inputFontSize | string | Font size of the input field. | '16px' |
87
+
| inputHeight | string | Height of the input field. | '45px' |
88
+
| inputBackgroundColor | string | Background color of the input field. | #fff |
89
+
| searchIconColor | string | Color of the search icon. |#888|
90
+
| closeIconColor | string | Color of the close icon. |#888|
91
+
| dropDownBackgroundColor | string | Background color of the dropdown. | #fff |
92
+
| dropDownBorderColor | string | Border color of the dropdown. | #ccc |
93
+
| dropDownMaxHeight | string | Maximum height of the dropdown. | '60vh' |
94
+
| dropDownBorderRadius | string | Border radius of the dropdown. | '8px' |
95
+
| scrollBarColor | string | Color of the scrollbar inside the dropdown. | #ccc |
84
96
85
97
## Example
86
98
@@ -100,19 +112,6 @@ export default MyComponent;
100
112
/>
101
113
```
102
114
103
-
### Customizing the Appearance
104
-
105
-
You can customize the appearance of the search bar using the following props:
106
-
107
-
-`containerClassName`
108
-
-`inputClassName`
109
-
-`dropdownClassName`
110
-
-`itemClassName`
111
-
-`searchIconClassName`
112
-
-`closeIconClassName`
113
-
114
-
These props allow you to apply your custom styles or use CSS modules.
115
-
116
115
## License
117
116
118
117
This project is licensed under the MIT License. See the [LICENSE](https://github.com/ghosnkarl/react-api-search/blob/main/LICENSE) file for more information.
@@ -131,6 +130,4 @@ For more information, please checkout the [CONTRIBUTIONS](https://github.com/gho
131
130
132
131
---
133
132
134
-
**Note**: This component uses TypeScript and provides full type safety. It can be easily integrated into any TypeScript or JavaScript-based React project.
135
-
=======
136
-
>>>>>>> main
133
+
# **Note**: This component uses TypeScript and provides full type safety. It can be easily integrated into any TypeScript or JavaScript-based React project.
Copy file name to clipboardExpand all lines: src/SearchBar.tsx
+11-11Lines changed: 11 additions & 11 deletions
Original file line number
Diff line number
Diff line change
@@ -14,18 +14,18 @@ import { MdClose } from 'react-icons/md';
14
14
* @param {string} [props.placeholder='Search...'] The placeholder text for the input field.
15
15
* @param {function} props.fetchData A function that fetches data based on the query string. Should return a promise with the results.
16
16
* @param {function} props.renderItem A function that renders an individual search result item.
17
-
* @param {function} props.onSelect Callback function triggered when a user selects a search result.
18
-
* @param {React.ReactNode} [props.loadingElement=<div>Loading...</div>] The JSX to display when loading.
17
+
* @param {function} props.onSelect Callback function triggered when a user selects an item from the search results.
18
+
* @param {React.ReactNode} [props.loadingElement=<div>Loading...</div>] The JSX to display when loading search results.
19
19
* @param {React.ReactNode} [props.emptyElement=<div>No results found</div>] The JSX to display when no results are found.
20
-
* @param {React.ReactNode} [props.errorElement=<div>Something went wrong</div>] The JSX to display when an error occurs.
21
-
* @param {number} [props.debounceDelay=500] The debounce delay (in milliseconds) to wait before calling the `fetchData` function after the user stops typing.
22
-
* @param {string} [props.containerClassName] Custom class for the search bar container.
23
-
* @param {string} [props.inputClassName] Custom class for the input field.
24
-
* @param {string} [props.dropdownClassName] Custom class for the dropdown containing search results.
25
-
* @param {string} [props.itemClassName] Custom class for each search result item.
26
-
* @param {boolean} [props.hideSearchIcon=false] Whether to hide the search icon in the input field.
27
-
* @param {string} [props.searchIconClassName] Custom class for the search icon.
28
-
* @param {string} [props.closeIconClassName] Custom class for the close icon.
20
+
* @param {React.ReactNode} [props.errorElement=<div>Something went wrong</div>] The JSX to display when an error occurs during fetching.
21
+
* @param {number} [props.debounceDelay=500] The debounce delay (in milliseconds) to wait before calling `fetchData` after the user stops typing.
22
+
* @param {boolean} [props.hideSearchIcon=false] Whether to hide the search icon inside the input field.
23
+
* @param {string} [props.containerClassName] Custom CSS class name applied to the search bar container.
24
+
* @param {string} [props.inputClassName] Custom CSS class name applied to the search input field.
25
+
* @param {string} [props.dropdownClassName] Custom CSS class name applied to the dropdown containing search results.
26
+
* @param {string} [props.itemClassName] Custom CSS class name applied to each individual search result item.
27
+
* @param {string} [props.searchIconClassName] Custom CSS class name applied to the search icon.
28
+
* @param {string} [props.closeIconClassName] Custom CSS class name applied to the close icon used for clearing the search input.
Copy file name to clipboardExpand all lines: src/types.ts
+24-12Lines changed: 24 additions & 12 deletions
Original file line number
Diff line number
Diff line change
@@ -2,23 +2,35 @@
2
2
* Type definition for the props of the SearchBar component.
3
3
*
4
4
* @template T The type of the items in the search results.
5
-
* @property {string} [placeholder='Search...'] The placeholder text for the search input.
6
-
* @property {(query: string) => Promise<T[]>} fetchData A function that takes a search query and returns a promise that resolves to an array of search results.
7
-
* @property {(item: T) => JSX.Element} renderItem A function that renders an individual item in the search results.
5
+
* @property {string} [placeholder='Search...'] The placeholder text for the search input field.
6
+
* @property {(query: string) => Promise<T[]>} fetchData A function that fetches data based on the query string. Returns a promise with the search results.
7
+
* @property {(item: T) => JSX.Element} renderItem A function that renders an individual search result item.
8
8
* @property {(item: T) => void} [onSelect] An optional callback function triggered when a user selects an item from the search results.
9
9
* @property {JSX.Element} [loadingElement=<div>Loading...</div>] The JSX element displayed while the search results are loading.
10
10
* @property {JSX.Element} [emptyElement=<div>No results found</div>] The JSX element displayed when no results are found.
11
11
* @property {JSX.Element} [errorElement=<div>Something went wrong</div>] The JSX element displayed when an error occurs while fetching results.
12
-
* @property {number} [debounceDelay=500] The debounce delay in milliseconds that determines how long to wait after the user stops typing before calling the fetchData function.
13
-
* @property {string} [containerClassName] The custom CSS class name applied to the search bar container.
14
-
* @property {string} [inputClassName] The custom CSS class name applied to the search input field.
15
-
* @property {string} [dropdownClassName] The custom CSS class name applied to the dropdown that holds the search results.
16
-
* @property {string} [itemClassName] The custom CSS class name applied to each individual search result item.
12
+
* @property {number} [debounceDelay=500] The debounce delay in milliseconds that determines how long to wait after the user stops typing before calling `fetchData`.
17
13
* @property {boolean} [hideSearchIcon=false] Whether to hide the search icon inside the input field.
18
-
* @property {string} [searchIconClassName] The custom CSS class name applied to the search icon.
19
-
* @property {string} [closeIconClassName] The custom CSS class name applied to the close icon used for clearing the search input.
14
+
* @property {string} [containerClassName] Custom CSS class name applied to the search bar container.
15
+
* @property {string} [inputClassName] Custom CSS class name applied to the search input field.
16
+
* @property {string} [dropdownClassName] Custom CSS class name applied to the dropdown that holds the search results.
17
+
* @property {string} [itemClassName] Custom CSS class name applied to each individual search result item.
18
+
* @property {string} [searchIconClassName] Custom CSS class name applied to the search icon.
19
+
* @property {string} [closeIconClassName] Custom CSS class name applied to the close icon used for clearing the search input.
20
+
* @property {string} [inputFontColor='#000'] Font color for the search input.
21
+
* @property {string} [inputBorderRadius='8px'] Border radius for the search input.
22
+
* @property {string} [inputBorderColor='#ccc'] Border color for the search input.
23
+
* @property {string} [inputFontSize='16px'] Font size for the search input.
24
+
* @property {string} [inputHeight='45px'] Height of the search input.
25
+
* @property {string} [inputBackgroundColor='#fff'] Background color for the search input.
26
+
* @property {string} [searchIconColor='#888'] Color for the search icon.
27
+
* @property {string} [closeIconColor='#888'] Color for the close icon.
28
+
* @property {string} [dropDownBackgroundColor='#fff'] Background color for the dropdown containing search results.
29
+
* @property {string} [dropDownBorderColor='#ccc'] Border color for the dropdown containing search results.
30
+
* @property {string} [dropDownMaxHeight='60vh'] Maximum height for the dropdown.
31
+
* @property {string} [dropDownBorderRadius='8px'] Border radius for the dropdown.
32
+
* @property {string} [scrollBarColor='#ccc'] Color for the scrollbar of the dropdown.
20
33
*/
21
-
22
34
exporttypeSearchBarProps<T>={
23
35
placeholder?: string;
24
36
fetchData: (query: string)=>Promise<T[]>;
@@ -30,7 +42,7 @@ export type SearchBarProps<T> = {
0 commit comments