WonderPush Notification Preview
Embeddable notification preview React components
Installation
npm install wonderpush-notification-previewTypings are included with the library.
Usage with NodeJS and bundlers, inside a React app
Import:
import { NotificationPreview } from 'wonderpush-notification-preview';And place the component in your page:
<NotificationPreview
platform={'android'}
appName={'MyApp'}
title={'What\'s new?'}
text={'We\'ve been working hard to bring you these amazing features!'}
buttons={[ 'Check this out' ]}
/>
Usage with HTML and <script> tags, outside a React app
-
Add the React scripts to your page
<head>:<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js" crossorigin></script>
See React's documentation Add React to a Website for more options.
-
Add the library script to your page
<head>:<script src="node_modules/wonderpush-notification-preview/dist/index.min.js"></script>
Note: Adjust the script's
srcattribute to point at the location where you installed this library. -
Add a placeholder element in your page
<body>:<div id="notification-preview"></div>
-
Run this to flesh out the component:
<script> ReactDOM.render( React.createElement(WonderPushNotificationPreview.NotificationPreview, { platform: 'android', appName: 'MyApp', title: 'Notification Preview', text: 'Preview your push notification', buttons: [ 'Reply', 'Ignore', 'Cancel', ], }), document.getElementById('notification-preview') ); </script>
You can run this at the appropriate time when the component comes into view, or simply place it at the bottom of your page
<body>.