The <TokenSearch /> is a search component with an optional debounce delay. If you want to handle debounce delay outside of this component, set delayMs to 0.

​
Usage

Use getTokens and <TokenSearch /> combined to search the Token. 
import { useCallback } from 'react';
import { base } from 'viem/chains';
// ---cut-before---
import { OnchainKitProvider } from '@coinbase/onchainkit';
import { getTokens } from '@coinbase/onchainkit/api'; 
import { TokenSearch } from '@coinbase/onchainkit/token'; 
import type { Token } from '@coinbase/onchainkit/token'; 

...

// example of async onChange handler
const handleChange = useCallback((value: string) => {
  async function getData(value) {
    const tokens: Token[] = await getTokens({ search: value }); 
    // Do something with tokens here
  }
  getData(value);
}, []);

...

<OnchainKitProvider
  chain={base}
  apiKey="YOUR_API_KEY"
>
  <TokenSearch onChange={handleChange} delayMs={200} />
</OnchainKitProvider>

​
Props

type TokenSearchProps = {
  className?: string;
  delayMs?: number; // Debounce delay in milliseconds
  onChange: (value: string) => void; // Search callback function
};