ClientProvider

function ClientProvider(__namedParameters): ReactElement;

Publishes a caller-owned Kit client to its subtree. Required for useClient, useClientCapability, and any plugin-specific hook that depends on a client capability.

Plugin composition belongs in plain Kit — the provider does no composition, lifecycle management, or disposal; it is a value channel, not a lifecycle channel. When config changes at runtime (e.g. cluster toggle), rebuild the client in useMemo and pass the new reference; the subtree resubscribes against the new client identity.

Async client support: when client is a promise (e.g. createClient().use(asyncPlugin())), the provider suspends the subtree via the nearest <Suspense> boundary until the promise resolves. On React 19 this delegates to React.use(promise); on React 18 a thrown-promise shim keyed by promise identity preserves the same contract.

Parameters

Returns

ReactElement

Examples

import { createClient } from '@solana/kit';
import { ClientProvider } from '@solana/react';
 
const client = createClient(); // .use(...) plugins as needed
 
function App() {
    return (
        <ClientProvider client={client}>
            <MyApp />
        </ClientProvider>
    );
}

const clientPromise = useMemo(
    () => createClient().use(someAsyncPlugin()),
    [],
);
 
<Suspense fallback={<Splash />}>
    <ClientProvider client={clientPromise}>
        <Shell />
    </ClientProvider>
</Suspense>

See

useClient