Components
SearchModal
A full-overlay conversation picker with controlled async search and result selection.
SearchModal is a full-overlay conversation picker. Input value, loading state, and results are
fully controlled by your app, so async search stays predictable.
Live preview
Full working example
import React from 'react';
import { SearchModal } from '@jazzmine-ui/react';
import type { Chat } from '@jazzmine-ui/react';
import '@jazzmine-ui/react/styles';
export function ConversationSearch() {
const [isOpen, setIsOpen] = React.useState(true);
const [searchQuery, setSearchQuery] = React.useState('');
const [results, setResults] = React.useState<Chat[]>([]);
const [isSearching, setIsSearching] = React.useState(false);
const onSearchQueryChange = async (query: string) => {
setSearchQuery(query);
setIsSearching(true);
try {
setResults(await searchConversations(query));
} finally {
setIsSearching(false);
}
};
return (
<SearchModal
isOpen={isOpen}
onClose={() => setIsOpen(false)}
onSelectConversation={(id) => setIsOpen(false)}
searchQuery={searchQuery}
onSearchQueryChange={onSearchQueryChange}
results={results}
isSearching={isSearching}
/>
);
}Props
Prop
Type
Async wiring notes
Use the controlled trio together
Treat isSearching, results, and onSearchQueryChange as one unit: toggle loading, fetch
results, then update result state.