-
- {selectedItem &&
You selected: {selectedItem.name}
}
+
+
Posts Search
+
+
+ placeholder='Search for posts...'
+ fetchData={fetchPosts}
+ loadingElement={
+ Please wait, fetching data...
+ }
+ emptyElement={
+ No posts match your search. Try something else!
+ }
+ errorElement={
+ Oops, something went wrong. Please try again later.
+ }
+ renderItem={(post) => (
+ {
+ e.currentTarget.style.backgroundColor = '#f0f0f0'; // hover background
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.backgroundColor = 'transparent'; // reset background
+ }}
+ >
+
{post.title}
+
+ {post.body}
+
+
);
-};
+}
-export default MyComponent;
+export default App;
```
## Props
@@ -94,24 +120,6 @@ export default MyComponent;
| dropDownBorderRadius | string | Border radius of the dropdown. | '8px' |
| scrollBarColor | string | Color of the scrollbar inside the dropdown. | #ccc |
-## Example
-
-### Basic Example
-
-```tsx
-
{
- const response = await fetch('https://api.example.com/search?q=${query}');
- return response.json();
- }}
- renderItem={(item) => {item.name}
}
- onSelect={(item) => console.log('Selected:', item)}
- placeholder='Search for items...'
- loadingElement={Loading...
}
- emptyElement={No results found
}
-/>
-```
-
## License
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.
diff --git a/example/index.tsx b/example/index.tsx
new file mode 100644
index 0000000..e12ed3a
--- /dev/null
+++ b/example/index.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import SearchBar from '../src/SearchBar';
+
+const container = document.getElementById('root');
+const root = createRoot(container!);
+
+type Post = {
+ id: number;
+ title: string;
+ body: string;
+};
+
+const fetchPosts = async (query: string): Promise => {
+ const response = await fetch(
+ `https://jsonplaceholder.typicode.com/posts?q=${encodeURIComponent(query)}`
+ );
+ if (!response.ok) throw new Error('Failed to fetch posts');
+ const data = await response.json();
+ return data;
+};
+
+root.render(
+
+
+
Posts Search
+
+
+ placeholder='Search for posts...'
+ fetchData={fetchPosts}
+ loadingElement={
+ Please wait, fetching data...
+ }
+ emptyElement={
+ No posts match your search. Try something else!
+ }
+ errorElement={
+ Oops, something went wrong. Please try again later.
+ }
+ renderItem={(post) => (
+ {
+ e.currentTarget.style.backgroundColor = '#f0f0f0'; // hover background
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.backgroundColor = 'transparent'; // reset background
+ }}
+ >
+
{post.title}
+
+ {post.body}
+
+
+