Getting Started

React SDK — Getting Started

Skill — Download

This guide shows the minimum setup to use the CROSSx React SDK.

Requirements

React 18+
@nexus-cross/crossx-sdk-core (peer dependency)

1) Install

::: code-group

npm install @nexus-cross/crossx-sdk-core @nexus-cross/crossx-sdk-react

pnpm add @nexus-cross/crossx-sdk-core @nexus-cross/crossx-sdk-react

yarn add @nexus-cross/crossx-sdk-core @nexus-cross/crossx-sdk-react

:::

2) Set up Provider

Wrap your app root with CROSSxProvider:

// main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { CROSSxProvider } from '@nexus-cross/crossx-sdk-react'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <CROSSxProvider config={{ projectId: 'YOUR_PROJECT_ID', appName: 'My DApp' }}>
      <App />
    </CROSSxProvider>
  </React.StrictMode>
)

The Provider automatically calls sdk.initialize() on mount, restoring any previous session.

3) Use hooks

import { useAuth, useWallet } from '@nexus-cross/crossx-sdk-react'

function App() {
  const { signIn, signOut, isAuthenticated, isLoading } = useAuth()
  const { address } = useWallet()

  if (isLoading) return <p>Loading...</p>

  if (!isAuthenticated) {
    return <button onClick={signIn}>Sign In</button>
  }

  return (
    <div>
      <p>Address: {address}</p>
      <button onClick={signOut}>Sign Out</button>
    </div>
  )
}

Provider config

CROSSxProvider accepts the same SDKConfig as createCROSSxSDK():

<CROSSxProvider config={{
  projectId: 'YOUR_PROJECT_ID',
  appName: 'My DApp',
  theme: 'dark',
  debug: true,
}}>
  <App />
</CROSSxProvider>

See Core SDK — Getting Started for all configuration options.

Updated about 19 hours ago