@blockstars/nootify-react v0.0.5

Nootify-React

This package contains React components to build a notification inbox for your site powered by Nootify.

• Requires React 18.0+

Quick Start

npm i @blockstars/nootify-react
# or
yarn add @blockstars/nootify-react

import React from 'react';
import ReactDOM from 'react-dom';
import { NotifyProvider } from "@blockstars/nootify-react";

ReactDOM.render(
    <NotifyProvider
        subscriberId={subscriberId} // required
        email={email} // optional
    >
    </NotifyProvider>
);

Extra Parameters

ReactDOM.render(
    <NotifyProvider
        subscriberId={subscriberId}
        email={email}
        firstName={firstName}
        lastName={lastName}
        avatar={avatar}
        phone={phone}
        appKey={apiKey}
        theme={customTheme}
        height={400}
        width={500}
        metadata={{
            location: ["AU", "US", "UK"],
            roles: ["appUser", "webUser"]
        }}
    >
    </NotifyProvider>
);

Custom Themes

It is possible to customize the text color, font size and border radius of some elements by providing to the Nootify component a theme property. This is going to be deep merged with the default theme. Note that the notification unread and unseen definitions inherit properties from notification default style.

This is the definition of the default theme:

const customTheme = {
    icon: {
    backgroundColor: "#FFFFFF",
    borderColor: "#4B445C"
    },
    body: {
        backgroundColor: "#e4e1eb",
        textColor: "#2A273A"
    },
    unseenBadge: {
        backgroundColor: "#e94e7d"
    },
    header: {
        fontFamily: "inherit",
        fontSize: "16px",
        backgroundColor: "#57445C",
        textColor: "#ffffff"
    },
    footer: {
        backgroundColor: "#e4e1eb",
        textColor: "#333333"
    },
    notification: {
        default: {
            textColor: "#212121",
            backgroundColor: "#e3e1ea",
            state: {
                color: "transparent"
            }
        },
        unseen: {
            textColor: "#222222",
            backgroundColor: "#ffffff",
            state: {
                color: "#ffffff"
            }
        },
        unread: {
            textColor: "#222222",
            backgroundColor: "#ffffff",
            state: {
                color: "#95788e"
            }
        }
    }
};