notifyo-client-components

Author: Oliver Gasser

Copyright © 2024 by moduulo OÜ

Version: 1.0

License: MIT

Technology: Vite React Javascript template

This package contains React client components for the Notify InApp notification center.
You need a valid subscription to Notifyo InApp notification center to use the provided client components in your own app.

To use the components, please install the library with:

npm install notifyo-client-components
yarn add notifyo-client-components

The following external libraries are mandatory for all components:

• axios
• html-react-parser

npm install axios html-react-parser
yarn add axios html-react-parser

The following Components are available:

NotifyoDisplayerMUI

This component is based on MUI. To use it, make sure you have MUI installed:

npm install @mui/material @emotion/react @emotion/styled
yarn add @mui/material @emotion/react @emotion/styled

Usage

To use the component:

import {NotifyoDisplayerMUI} from 'notifyo-client-components';

<NotifyoDisplayerMUI
    userRef={userRef}
    width='40vw'
    label='Notifyo Displayer'
    apiUrl='xxx'
/>

@props:
userRef: string {-|-} should contain an individual user reference of your own app
width: string {-|-} the width of the displayed container containing In-App messages for the user cited in userRef
label: string {-|-} the Title displayed in the container
apiUrl: string {-|-} the URL to the backend api endpoints

Please ask our support for the apiUrl, or login into Notifyo InAPP notification center and go to the developer section.

NotifyoDisplayerCSS

This component uses CSS classes:

Usage

To use the component:

import {NotifyoDisplayerMUI} from 'notifyo-client-components';

<NotifyoDisplayerMUI
    userRef={userRef}
    width='40vw'
    label='Notifyo Displayer'
    apiUrl='xxx'
/>

@props:
userRef: string {-|-} should contain an individual user reference of your own app
width: string {-|-} the width of the displayed container containing In-App messages for the user cited in userRef
label: string {-|-} the Title displayed in the container
apiUrl: string {-|-} the URL to the backend api endpoints

Please ask our support for the apiUrl, or login into Notifyo InAPP notification center and go to the developer section.

You can overwrite the following CSS classes by importing your own css-file:

• .nfy-container-width: 40vw
• .nfy-label-style: {font-size: 22px; font-weight: 700}