Token search configuration
OptionaldefaultSearchTerm?: stringOptionaldeps: DependencyList = []Additional dependencies that trigger search recalculation
Search state and controls
const { tokens } = useTokens();
const { searchResult, searchTerm, setSearchTerm } = useTokenSearch({
tokens,
defaultSearchTerm: 'eth'
});
return (
<>
<input
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
placeholder="Search tokens..."
/>
<TokenList tokens={searchResult} />
</>
);
Custom hook that provides performant token search functionality.
Enables efficient filtering of token lists by searching through token properties, using React's
useDeferredValueto prevent UI blocking during search operations. The hook searches for matches in token address, symbol, and name properties.