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

# Quick example

> A quick example of how to use the React SDK in a React application.

Add the MarketProvider component and add your `partnerId` to the `initializationConfig` prop.

```jsx App.tsx theme={null}
import './App.css'
import MyPage from './MyPage'
import { MarketProvider } from '@superlink-me/sdk-react'

function App() {
  return (
    <>
      <MarketProvider initializationConfig={{ partnerId: "<your-partner-id>" }}>
        <MyPage/>
      </MarketProvider>
    </>
  )
}

export default App
```

Add the MarketModal component, set the user info and send transaction callback using the hooks. Execute `open()` to open the modal.

```jsx MyPage.tsx theme={null}
import { useEffect } from 'react'
import { MarketModal, useMarketModal } from '@superlink-me/sdk-react'

function MyPage() {
  const { open, setUserInfo, setSendTransaction } = useMarketModal()

  useEffect(() => {
    setUserInfo({
      wallets: [{
        address: "<user-wallet-address>", 
        coin: "<coin-type-of-wallet>"
      }],
      externalUserId: "<user-identifier>"
    })

    setSendTransaction((uri) => {
      // Use the uri to send the transaction
    })
  }, [])

  return (
    <>
     <MarketModal />
      <button onClick={() => open()}>
          Open Marketplace
      </button>
    </>
  )
}

export default MyPage

```