Skip to content

<TokenSearch />

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 Tokens.

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

TokenSearch