# NovuProvider (/platform/sdks/react/hooks/novu-provider)

Learn how to use the NovuProvider component to set up the Novu context in your React application

The `NovuProvider` is the top-level component that provides the [Novu instance](/platform/inbox/headless-mode) to the rest of the hooks through the context.
Usually, it's placed somewhere in the root of your application, which makes the hooks accessible throughout the application.

## Props

<TypeTable
  type={{
  subscriberId: {
    type: "string",
    description: "The unique identifier of the subscriber",
    typeDescription: "Required",
  },
  applicationIdentifier: {
    type: "string",
    description: "Your application identifier from Novu",
    typeDescription: "Required",
  },
  subscriberHash: {
    type: "string",
    description: "HMAC encryption hash for the subscriber",
  },
  context: {
    type: "object",
    description: "Defines contextual attributes (for example, tenant, app, team) for filtering and personalizing notifications.",
  },
  contextHash: {
    type: "string", 
    description: "The HMAC-SHA256 hash of the context object. Required if context is provided and HMAC is enabled." 
  },
  apiUrl: {
    type: "string",
    description: "Custom backend URL for self-hosted instances",
  },
  socketUrl: {
    type: "string",
    description: "Custom socket URL for self-hosted instances",
  },
  children: {
    type: "ReactNode",
    description:
      "The child components that will have access to the Novu context",
    typeDescription: "Required",
  },
}}
/>

## Example Usage

<Tabs items={['US', 'EU', 'Using Context', 'HMAC Encryption']}>
  <Tab value="US">
    ```tsx
    import { NovuProvider } from '@novu/react';

    function App() {
      return (
        <NovuProvider
          subscriber="SUBSCRIBER_ID"
          applicationIdentifier="APPLICATION_IDENTIFIER"
        >
          {/* Your app components */}
        </NovuProvider>
      );
    }
    ```
  </Tab>

  <Tab value="EU">
    ```tsx
    import { NovuProvider } from '@novu/react';

    function App() {
      return (
        <NovuProvider
          subscriber="SUBSCRIBER_ID"
          applicationIdentifier="APPLICATION_IDENTIFIER"
          apiUrl="https://eu.api.novu.co"
          socketUrl="wss://eu.socket.novu.co"
        >
          {/* Your app components */}
        </NovuProvider>
      );
    }
    ```
  </Tab>

  <Tab value="Using Context">
    <Callout type="info"> Learn how to use Context for filtering and personalization in the [Inbox withContext](/platform/inbox/configuration/inbox-with-context) guide.</Callout>

    ```tsx
    import { NovuProvider, useNovu } from '@novu/react';

    function App() {
      return (
      <NovuProvider
        applicationIdentifier="APPLICATION_IDENTIFIER"
        subscriber="SUBSCRIBER_ID"
        context={{
          tenant: { id: "org-123" }
        }}
      >
        <App />
      </NovuProvider>
      );
    }

    // In child components
    const MyComponent = () => {
      const novu = useNovu();
      console.log(novu.context);
      // Logs: { tenant: { id: "org-123" } }
    };
    ```
  </Tab>

  <Tab value="HMAC Encryption">
    <Callout type="info">
      Read more about [HMAC Encryption](/platform/inbox/prepare-for-production#secure-your-inbox-with-hmac-encryption).
    </Callout>

    ```tsx
    import { NovuProvider } from '@novu/react';

    function App() {
      return (
        <NovuProvider
          subscriber="SUBSCRIBER_ID"
          applicationIdentifier="APPLICATION_IDENTIFIER"
          subscriberHash="SUBSCRIBER_HASH_HMAC_ENCRYPTION"
        >
          {/* Your app components */}
        </NovuProvider>
      );
    }
    ```
  </Tab>
</Tabs>