2.0.0

2.0.0 Release

🚧 Includes breaking changes 🚧

If migrating from a 1.0+ version, read the migration guide.

---

The React OneSignal NPM package previously lacked several OneSignal WebSDK functions. The package was also dependent on an initialization helper set-up hook. This ensured OneSignal was ready to execute the functions before doing so. The initialization function was also different from our WebSDK initialization.

This release addresses the above points by:

• adding all supported functions
• changing the initialization function
• removing the need for the set-up hook

Additionally, the release includes some clean-up:

• restructures repository so the package is at the top level
• removes unneeded files
• updates the README

We hope the changes will greatly simplify the package and improve usability. We also want to ensure adopters have access to all of the most up-to-date functions and features provided by OneSignal.

Events

The events object is no longer needed either. In its place, the event handlers can now be added directly via the on function to match the WebSDK 1:1.

Typescript Support

This release also adds full Typescript support for all functions.

Release 2.0 (Beta)

See #44 for more info.

1.7.0

🔥 Support Slidedown prompts

This release adds two new functions: showSlidedownPrompt and showCategorySlidedown. With these, you can call the option to show the registration mode. Docs here.

Thanks to @RodolfoSilva for the contributions! 🚀

1.6.0

🔥 New setup hook!

You can now use the new setup hook to setup your OneSignal settings as soon as OneSignal is initialized into the page. This makes it much easier for you to apply your settings since you don't have to check if OneSignal is initialized or not! 😆

Here's a quick example:

import OneSignal, { useOneSignalSetup } from 'react-onesignal';

type AppProps = {
  user: {
    id: string;
    email: string;
  };
};

function App(props: AppProps) {
  const { user } = props;

  useOneSignalSetup(() => {
    OneSignal.setEmail(user.email);
    OneSignal.setExternalUserId(user.id);
  });
}

🔥 New functions

This version adds two more functions to help setup OneSignal:

• logoutEmail
• removeExternalUserId

Examples:

import OneSignal from 'react-onesignal';

// Remove email tracking
OneSignal.logoutEmail();

// Remove external user ID
OneSignal.removeExternalUserId();

💅 Improvements

This version also brings up some improvements, raising the bar on code quality and upgrading some dependencies.

Thanks to @BigsonLvrocha for the contributions! 🚀

1.5.0

🔥 Support new options

This version adds support for new methods:

• isPushNotificationsEnabled
• isPushNotificationsSupported
• setSubscription

🔥 Improve error handling

If your OneSignal is not set up properly, this lib will now throw an exception.

Thanks to @Matiyeu and @BigsonLvrocha for the contributions! 🚀

1.4.0

🔥 Support new options

This version adds Safari support, as well as some new options to customize your OneSignal instance:

• safari_web_id
• prenotify
• theme
• offset
• text
• colors

Refer to the official documentation for more info on Safari support.

Thanks to @Matiyeu for the contribution! 🚀

1.3.0

🔥 Support OneSignal Tags and Audience Segmenting

You can now use sendTag and sendTags to set OneSignal tags for segment filtering.

Refer to the README:

// Send a tag to OneSignal for the current player
OneSignal.sendTag('tag', 'tagValue');

// Send multiple tags to OneSignal for the current player
const keyValues = {
  'tag1': 'value1',
  'tag2': 'value2',
  'tag3': 'value3',
};

OneSignal.sendTags(keyValues);

Thanks to @slothluvchunk for the contribution! 🚀

1.2.1

🔥 Support Event Listeners

We now support event listeners in OneSignal - you can listen for events such as subscriptionChange, notificationDismiss, etc.

For documentation on events and event listeners, check out the Web Push SDK docs.

Refer to the README:

To add an event listener to the OneSignal.push() array, pass an array of events to the ReactOneSignal.initialize() function as the third parameter.

Each object in the array should contain:

• listener -- (optional) Default value: 'on'.
  Some events can be listened for via multiple listeners (e.g. .on(), .once()).
  Check the docs to see which listeners listen for your event.
  Example: 'on' | 'once'

• event -- Name of the event being listened for.
  Example: 'subscriptionChange'

• callback -- Callback function for event.
  Example: (value) => { console.log(value); }

const events = [
  {
    listener: 'once',
    event: 'subscriptionChange',
    callback: (isSubscribed) => {
      if (true === isSubscribed) {
        console.log('The user subscription state is now:', isSubscribed);
      }
    },
  },
  {
    event: 'notificationDisplay',
    callback: (event) => {
      console.warn('OneSignal notification displayed:', event);
    },
  },
  {
    event: 'notificationDismiss',
    callback: (event) => {
      console.warn('OneSignal notification dismissed:', event);
    },
  },
];


ReactOneSignal.initialize(applicationId, options, events);

Thanks to @slothluvchunk for the contribution! 🚀

1.1.19

🔥 Support External User ID

We now support setExternalUserId and getExternalUserId!

Refer to the README:

You can use setExternalUserId and getExternalUserId to track external user ID.

// Set external user ID
OneSignal.setExternalUserId('your_id');

// Get external user ID
const externalUserId = await OneSignal.getExternalUserId();

1.1.16

🔥 Support all OneSignal options in initialize

We now support all OneSignal options when initializing!

Refer to the README:

Simply initialize OneSignal with your token:

import OneSignal from 'react-onesignal';

OneSignal.initialize('xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', options);

Where options is:

subdomainName?: string;
allowLocalhostAsSecureOrigin?: boolean;
requiresUserPrivacyConsent?: boolean;
persistNotification?: boolean;
autoResubscribe?: boolean;
autoRegister?: boolean;
notificationClickHandlerMatch?: string;
notificationClickHandlerAction?: string;
notifyButton?: {
  enable?: boolean;
  size?: 'small' | 'medium' | 'large';
  position?: 'bottom-left' | 'bottom-right';
  showCredit?: boolean;
}

Thanks to @David-Melo for the contribution! 🚀