acpr_notifications v1.23.5

Notification Component

This package contains a reusable notifications component for React.

Usage:

    Install the package and import in the parent Component:
            import Notifications from "acpr_notifications";
            <Notifications
                notifications={notificationsState}
                listStyle={listStyle}
                smListStyle = {listStyleSmall}
                isBackButtonVisible = {true}
                requireCloseButton={true}
                onClose={onClose}
                onClearAll={onClearAll}
            />

    In order to use the default Styling import following
            import 'acpr_notifications/dist/main.css';

Props:

//Required

1. notifications: An array containing the notifications in following format. Each notification is an object for following keys.
    id: "unique id given to each notification element"
    avatarlink: "if exists, this link will be used to download the avatar image",
    link: "Navigation link where user will be redirected on clicking on notification.",
    primaryText: "Primary text of the notification",
    secondaryText: "Secondary text of the notification",
Send an empty array if no notifications are present.
2. onClearAll: Handler for Clear all button.

//Optional

    1. listStyle: An object containing styles for the Notification List when screensize > 960px.
    2. smListStyle: An object containing styles for the Notification List when screensize < 960px
    3. isBackButtonVisible : true, if an a back button is required to close the list.
    4. requireCloseButton: true, if a button is to be added to each notification to clear it.
    5. onClose: Handler for close button (mentioned in item number 5)
    6. badgeStyle: Set up the badgeStyle (i.e the marker above notification icon which displays number of notifications).
    7. maxBadgeValue: eg if maxBadgeValue = 200, then badge will display 200+ when when number of notifications exceed 200.
    8. badgeInvisible: true/false show/hide badge
    9. activeIcon: Custom Icon when list is visible
    10. inActiveIcon: Custom Icon when list is hidden
    11. notificationNavigation: Styles for anchor tag when notification item supports navigation.
    12. emptyNotificationsPanel: Styles for list when notification array is empty.