acpr_notifications
v1.23.5
Published
A resusable notification Component for React applications.
Downloads
35
Readme
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.