push-notification-preview

This package is a push notification preview component based on Material-UI. The layouts are based on iOS13 and Android Pie.

• Provides a preview for regular push notifications on Android devices (including emoticons!)
• Message and title fields accept string with emojis in unicode and translates them to its Android / iOS counterparts

Check out this Live Demo.

Usage

Installing this package would also install the following dependencies:

• @material-ui/core
• @material-ui/icons
• lodash
• emoji-mart
• emoji-regex
• webfontloader

Install the actual package:

$ npm install push-notification-preview

Then you just need to import it into your React application:

import { AndroidPushNotificationPreview, ApplePushNotificationPreview, PushNotificationPreview } from "push-notification-preview";
 
//Use **AndroidPushNotificationPreview** for previewing regular push notifications on Android
<AndroidPushNotificationPreview
  appName="Accessibility"
  time="10/5/19"
  title="Single tap to swipe is on"
  message="Tap here to view details."
/>
//Use **ApplePushNotificationPreview** for previewing regular push notifications on IOS
<ApplePushNotificationPreview
  appName="Accessibility"
  time="10/5/19"
  title="Single tap to swipe is on"
  message="Tap here to view details."
/>
//Use **PushNotificationPreview** for previewing both Android and IOS push notifications
<PushNotificationPreview
  platform="apple" // or "android"
  appName="Accessibility"
  time="10/5/19"
  title="Single tap to swipe is on"
  message="Tap here to view details."
/>;

Props & Features

Props	Mandatory	Default	Description
platform	yes		Applicable only to PushNotificationPreview class
actionButtons	no		An array containing action button labels to be displayed
appName	yes		App name to be displayed on the notification header
color	no	'black'	Color to differentiate the app icon and app name on the notification preview
image	no		A URL of the image attached to the notification
message	yes		Additional information to support the title of the notfication preview
time	no	'12:34 PM	Time to be displayed on the notification header
title	yes		Emphasized text of the notfication preview

Styling

If you want to override the styles, you can use withStyles:

import AndroidPushNotificationPreview from './AndroidPushNotificationPreview';
import {withStyles} from '@material-ui/styles';
 
const styles = {
  root: {
    textAlign: 'center'
  }
}
 
const StyledAndroidPushNotificationPreview = withStyles(styles)(AndroidPushNotificationPreview);

License

MIT