> ## Documentation Index
> Fetch the complete documentation index at: https://docs.suave.money/llms.txt
> Use this file to discover all available pages before exploring further.

# Components

Suave SDK provides drop-in ready components for React projects.
This includes a widget for executing swaps directly. This is the easiest way to give your users a seamless experience for swapping tokens.
This component handles all the logic to connect a wallet to our SDK and execute a swap.
Wagmi is used under the hood to connect and does require a `WalletConnectId` to be provided.
You can also override the default provider by using the `wagmiConfigOverride` prop.

### React Hooks

```javascript theme={null}
import { SuaveSDK } from 'suave-sdk';
import { useRouteEvents } from 'suave-sdk/react/routes'; //ROUTING HOOKS
import { usePaymentEvents } from 'suave-sdk/react/routes'; //Payments HOOKS
import { useEffect, useState } from 'react';
import { SuaveSDKProvider, Widget } from 'suave-sdk/react'; // Importing the necessary components

const sdk = new SuaveSDK({
    apiKey: 'your-api-key'
});
// Custom hook for managing route events

// Using the custom hooks
const currentRoute = useCurrentRoute();
const routeState = useRouteState(sdk);

console.log('Current Route:', currentRoute);
console.log('Route State:', routeState);

// Main component to provide SDK context
function SDKContextProvider({ children }) {
    const sdk = new SuaveSDK({
        apiKey: 'your-api-key'
    });

    return (
        <SuaveSDKProvider sdk={sdk}>
            {children}
        </SuaveSDKProvider>
    );
}


// Using the SDKContextProvider and Widget
function App() {
    return (
        <SDKContextProvider>
            <Widget
                //wagmiConfigOverride={wagmiConfig}
                walletConnectId={process.env.REACT_APP_WALLETCONNECT_ID}
                style={{ backgroundColor: 'lightblue' }} // Example styling
                tokens=[]
                chains=[]
                onSubmit={() => console.log('Submitted')}
                onFailure={() => console.log('Failed')}
                onQuote={() => console.log('Quoted')}
                onRoute={() => console.log('Route')}
                onLoaded={() => console.log('Loaded')}
            />
        </SDKContextProvider>
    );
}
```