Raydius Litepaper
  • Introduction
    • Overview
    • Mission & Vision
    • What is Raydius?
  • Core Concepts
    • Chain Abstraction
    • Raydius SDK
      • Social Login SDK
        • Raydius React SDK
          • Prerequisites
          • Installation
          • Get Your Raydius App ID
          • Set Up Your App with Raydius React SDK
          • Using the useRaydius Hook
          • Wallet Security
          • Setup
          • Advanced Usage with wagmi
          • Example Scenarios
        • Raydius Vue SDK
          • Prerequisites
          • Installation
          • Get Your Raydius App ID
          • Set Up Your App with Raydius Vue SDK
          • Using the useRaydius Hook
          • RaydiusVuePlugin Config
          • Wallet Security
      • User Loyalty Toolkit
      • Analytics Dashboard
    • Raydius Extension Store
    • Raydius Express
  • Technical Architecture
    • Tech Stack Overview
    • Multi-Chain Support
    • Security & Compliance
  • Getting Started
    • Setting Up Your Development Environment
    • Using the Raydius SDK
    • Creating and Managing Extensions
    • Integrating Raydius Express
  • Tokenomics
    • Overview of $RAYS
    • Token Utilities
    • Token Demand and Supply
  • Ecosystem and Community
    • Community Hub
    • Partnerships & Integrations
    • Developer & User Incentives
  • FAQs
    • General Questions
    • Technical Questions
    • Token-Related Questions
Powered by GitBook
On this page
  1. Core Concepts
  2. Raydius SDK
  3. Social Login SDK
  4. Raydius React SDK

Set Up Your App with Raydius React SDK

Once you have your app ID, import the RaydiusProvider component into your project, and wrap your app with it. It is generally recommended to render it as close to the root of your application as possible.

Example:

Once you have your app ID, import the RaydiusProvider component into your project, and wrap your app with it. It is generally recommended to render it as close to the root of your application as possible.

import { RaydiusProvider} from '@raydius/react’'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <RaydiusProvider config={{ appId: 'xxxxxx', theme: 'dark' }}>
      <Component {...pageProps} />
    </RaydiusProvider>
  )
}
PreviousGet Your Raydius App IDNextUsing the useRaydius Hook

Last updated 8 months ago