Function SanityApp

SanityApp(props: SanityAppProps): ReactElement

The SanityApp component provides your Sanity application with access to your Sanity configuration, as well as application context and state which is used by the Sanity React hooks. Your application must be wrapped with the SanityApp component to function properly.

The config prop on the SanityApp component accepts either a single SanityConfig object, or an array of them. This allows your app to work with one or more of your organization’s datasets.

Parameters

props: SanityAppProps
Your Sanity configuration and the React children to render

Returns ReactElement

Your Sanity application, integrated with your Sanity configuration and application context

Remarks

When passing multiple SanityConfig objects to the config prop, the first configuration in the array becomes the default configuration used by the App SDK Hooks.

Example

import { SanityApp, type SanityConfig } from '@sanity/sdk-react'

import MyAppRoot from './Root'

// Single project configuration
const mySanityConfig: SanityConfig = {
  projectId: 'my-project-id',
  dataset: 'production',
}

// Or multiple project configurations
const multipleConfigs: SanityConfig[] = [
  // Configuration for your main project. This will be used as the default project for hooks.
  {
    projectId: 'marketing-website-project',
    dataset: 'production',
  },
  // Configuration for a separate blog project
  {
    projectId: 'blog-project',
    dataset: 'production',
  },
  // Configuration for a separate ecommerce project
  {
    projectId: 'ecommerce-project',
    dataset: 'production',
  }
]

export default function MyApp() {
  return (
    <SanityApp config={mySanityConfig} fallback={<div>Loading…</div>}>
      <MyAppRoot />
    </SanityApp>
  )
}