NovuProvider

The NovuProvider is the top-level component that provides the Novu instance 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

Property	Type	Description
`subscriberId`	`string`	The unique identifier of the subscriber
`applicationIdentifier`	`string`	Your application identifier from Novu
`subscriberHash`	`string`	HMAC encryption hash for the subscriber
`context`	`object`	Defines contextual attributes (for example, tenant, app, team) for filtering and personalizing notifications.
`contextHash`	`string`	The HMAC-SHA256 hash of the context object. Required if context is provided and HMAC is enabled.
`apiUrl`	`string`	Custom backend URL for self-hosted instances
`socketUrl`	`string`	Custom socket URL for self-hosted instances
`children`	`ReactNode`	The child components that will have access to the Novu context

Example Usage

US
EU
Using Context
HMAC Encryption

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

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>
  );
}

Learn how to use Context for filtering and personalization in the Inbox withContext guide.

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" } }
};

​Props

​Example Usage

Props

Example Usage