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
