`<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 Token.

// @noErrors: 7006 2322 1128 - 'value' implicitly has any type, Type GetTokensResponse is not assignable to type 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

TokenSearchReact