Showing web push notifications from Chrome, Safari, and Firefox
This is a JavaScript module that can be used to easily include OneSignal code in a website or app that uses React for its front-end codebase.
OneSignal is the world's leader for Mobile Push Notifications, Web Push, and In-App Messaging. It is trusted by 800k businesses to send 5 billion Push Notifications per day.
You can find more information on OneSignal here.
Version 2.0 was recently released. Read the Migration Guide here if you're coming from a version 1 release of the SDK.
You can use yarn or npm.
yarn add react-onesignalnpm install --save react-onesignalInitialize OneSignal with your appId via the options parameter:
import OneSignal from 'react-onesignal';
OneSignal.init({ appId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' });The init function returns a promise that resolves when OneSignal is loaded.
Examples
await OneSignal.init({ appId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' });
// do other stuffconst [initialized, setInitialized] = useState(false);
OneSignal.init({ appId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' }).then(() => {
setInitialized(true);
OneSignal.showSlidedownPrompt().then(() => {
// do other stuff
});
})You can pass other options to the init function. Use these options to configure personalized prompt options, auto-resubscribe, and more.
This package includes Typescript support.
interface OneSignal {
init(options?: any): Promise<void>
on(event: string, listener: Function): void
off(event: string, listener: Function): void
once(event: string, listener: Function): void
isPushNotificationsEnabled(callback?: Action<boolean>): Promise<boolean>
showHttpPrompt(options?: AutoPromptOptions): void
registerForPushNotifications(options?: RegisterOptions): Promise<void>
setDefaultNotificationUrl(url: string): void
setDefaultTitle(title: string): void
getTags(callback?: Action<any>): void
sendTag(key: string, value: any, callback?: Action<Object>): Promise<Object | null>
sendTags(tags: TagsObject<any>, callback?: Action<Object>): Promise<Object | null>
deleteTag(tag: string): Promise<Array<string>>
deleteTags(tags: Array<string>, callback?: Action<Array<string>>): Promise<Array<string>>
addListenerForNotificationOpened(callback?: Action<Notification>): void
setSubscription(newSubscription: boolean): Promise<void>
showHttpPermissionRequest(options?: AutoPromptOptions): Promise<any>
showNativePrompt(): Promise<void>
showSlidedownPrompt(options?: AutoPromptOptions): Promise<void>
showCategorySlidedown(options?: AutoPromptOptions): Promise<void>
showSmsSlidedown(options?: AutoPromptOptions): Promise<void>
showEmailSlidedown(options?: AutoPromptOptions): Promise<void>
showSmsAndEmailSlidedown(options?: AutoPromptOptions): Promise<void>
getNotificationPermission(onComplete?: Function): Promise<NotificationPermission>
getUserId(callback?: Action<string | undefined | null>): Promise<string | undefined | null>
getSubscription(callback?: Action<boolean>): Promise<boolean>
setEmail(email: string, options?: SetEmailOptions): Promise<string|null>
setSMSNumber(smsNumber: string, options?: SetSMSOptions): Promise<string | null>
logoutEmail(): void
logoutSMS(): void
setExternalUserId(externalUserId: string | undefined | null, authHash?: string): Promise<void>
removeExternalUserId(): Promise<void>
getExternalUserId(): Promise<string | undefined | null>
provideUserConsent(consent: boolean): Promise<void>
getEmailId(callback?: Action<string | undefined>): Promise<string | null | undefined>
getSMSId(callback?: Action<string | undefined>): Promise<string | null | undefined>
sendOutcome(outcomeName: string, outcomeWeight?: number | undefined): Promise<void>
}See the official OneSignal WebSDK reference for information on all available SDK functions.
You can also listen for native OneSignal events like subscriptionChange.
Example
OneSignal.on('subscriptionChange', function(isSubscribed) {
console.log("The user's subscription state is now:", isSubscribed);
});
See the OneSignal WebSDK Reference for all available event listeners.
Special thanks to pedro-lb and others for work on the project this package is based on.
