react-push-notification
v1.5.4TypeScript
React push notifications
push notificationsnotificationsmessagesreactreact push notificationreact push notificationsreact notificationsreact native OS push notificationsnative OSnative push notifications
0/weekUpdated 2 years agoMITUnpacked: 36.6 KB
Published by Fabio de Bruijn
npm install react-push-notification
---
react-push-notification
Easy, type-safe, & lightweight push notification library for React.js.
Written in TypeScript & compiled to JavaScript for robust code.
In-app notification system, as well as web native Notification support.
$3
``bash`
yarn add react-push-notification
or bash`
npm i react-push-notification
$3
In-app notification example. Regular React components.
Web native notification example. Web native components. Send push notifications outside of the browser while the browser is running in the background or just idle.
Mac OSX example:
$3
Add the notifications component to the top of your React.js project.
This is probably index.js or app.js. When using native: true, this step is not required.
`jsx
import { Notifications } from 'react-push-notification';
const App = () => {
return (
// Top of DOM tree
Hello world.
);
}
};
export default App;
`
$3
import the addNotification function and call it.
`jsx
import addNotification from 'react-push-notification';
const Page = () => {
const buttonClick = () => {
addNotification({
title: 'Warning',
subtitle: 'This is a subtitle',
message: 'This is a very long message',
theme: 'darkblue',
native: true // when using native, your OS will handle theming.
});
};
return (
);
}
};
export default Page;
`
| Property | Description |
| ---------------------------------- | ------------------------------------------------------------------ |
| position string | One of top-left, top-middle, top-right, bottom-left, bottom-middle, bottom-right.top-left
Default: |
addNotification({Options}) argument properties
The addNotification() function has the following function type:
`tsx
const options = {
title: 'title',
subtitle: 'subtitle', //optional
message: 'message', //optional
onClick: (e: Event | Notification) => void, //optional, onClick callback.
theme: 'red', //optional, default: undefined
duration: 3000, //optional, default: 5000,
backgroundTop: 'green', //optional, background color of top container.
backgroundBottom: 'darkgreen', //optional, background color of bottom container.
colorTop: 'green', //optional, font color of top container.
colorBottom: 'darkgreen', //optional, font color of bottom container.
closeButton: 'Go away', //optional, text or html/jsx element for close text. Default: Close,
native?: boolean, //optional, makes the push notification a native OS notification
icon?: string, // optional, Native only. Sets an icon for the notification.
vibrate?: number | number[], // optional, Native only. Sets a vibration for the notification.
silent?: boolean // optional, Native only. Makes the notification silent.
};
const addNotification: (options: Options) => void;
`
The addNotification() function takes an object as argument with the follow properties:
| Property | Description |
| ---------------------------------- | ------------------------------------------------------------------ |
| title string | Required. Title of the push notification |string
| subtitle | Optional. Subtitle of the push notification |string
| message | Optional. Message of the push notification |(e: Event OR Notification) => void
| onClick | Optional. onClick callback of push notification.native: true
When e will be of type Notification.e
Else will be of type Event. |string
| theme | Optional. One of darkblue, red, light, undefined.undefined
Default: |number
| duration | Optional. Duration of the push notification in ms.string
Default: 3000 |
| backgroundTop | Optional. background color of top container. |string
| backgroundBottom | Optional. background color of bottom container. |string
| colorTop | Optional. font color of top container. |string
| colorBottom | Optional. font color of bottom container. |string
| closeButton | Optional. text or html/jsx element for close text.Close
Default: |boolean
| native | Optional. Turns the notification into a native web notification. false
Default: |string
| icon | Optional. Native only. Shows an icon in the notification. |number
| vibrate | number[] | Optional. Native only. Makes the notification vibrate. |boolean
| silent | Optional. Native only. Makes the notification silent. |
The custom background or font colors will always override a chosen theme.
$3
v1.3.0
Added native OS push notification support, as well as an onClick` callback function.