[NV-271] - Tracking - React widget component

[scopsy]

Why?

Currently, when people want to embed the notification center within their app they use the embedding script provided in the application settings screen. This code snippet is similar to google analytics creates an iframe window through which the notification center is displayed thru. On one hand, it's universal but creates weird implementation details when embedding with modern front-end frameworks like react.

What?

Exporting our current widget directly using a react component that the end-user can download from npm, integrate his application id and customize some of the components we provide.

Component API

<NovuProvider appId={'123456'} backend={'https://api.novu.co/v1'} userId={1234}>
  <NotificationCenter item={CustomNotificationItem} header={CustomHeader} footer={CustomFooter} onNotificationClick={}>
    {(props) => <NotificationBell {...props} />}
  </NotificationCenter>
</NovuProvider>

Additional Hooks:

• useNotifications();
• useUnseenCounter()