NovuProvider - Novu — ContextQMD

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

Prop	Type	Required	Description
subscriberId	string	Yes	The unique identifier of the subscriber
applicationIdentifier	string	Yes	Your application identifier from Novu
subscriberHash	string	No	HMAC encryption hash for the subscriber
apiUrl	string	No	Custom api url for self-hosted instances
socketUrl	string	No	Custom socket URL for self-hosted instances
children	ReactNode	Yes	The child components that will have access to the Novu context

Example Usage

<Tabs> <Tab> ```tsx

function App() {
  return (
    <NovuProvider
      subscriber="SUBSCRIBER_ID"
      applicationIdentifier="APPLICATION_IDENTIFIER"
    >
    </NovuProvider>
  );
}
```

</Tab> <Tab> ```tsx

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

</Tab> <Tab> <Note> Read more about [HMAC Encryption](/platform/inbox/prepare-for-production#secure-your-inbox-with-hmac-encryption). </Note>

```tsx

function App() {
  return (
    <NovuProvider
      subscriber="SUBSCRIBER_ID"
      applicationIdentifier="APPLICATION_IDENTIFIER"
      subscriberHash="SUBSCRIBER_HASH_HMAC_ENCRYPTION"
    >
    </NovuProvider>
  );
}
```

</Tab> </Tabs>