Our ReactJS NPM Package is Now Available

We are pleased to announce the graduation of our ReactJS OneSignal SDK from Beta to Generally Available (GA). This new React-specific plugin supports React developers using OneSignal by reducing friction when embedding our Web SDK into your React application.

Benefits of Using Our ReactJS SDK

The OneSignal ReactJS SDK streamlines the process of adding the OneSignal SDK to your React web application. The SDK now includes all the most up-to-date OneSignal functions available in the native Web SDK. Because the SDK is now available as an NPM package, you can more easily integrate and manage OneSignal along with your existing dependencies. Additionally, the SDK comes with full Typescript support you can leverage right out of the box.

Getting Started

To help you get started using our ReactJS SDK, we've outlined some basic steps below. For more thorough step-by-step instructions, see the full OneSignal-React Github README guide, check out our blog post How to Add Push Notifications into a ReactJS App, or watch our video tutorial on ReactJS Setup.

Adding the ReactJS NPM Package to Your App

First, add the React OneSignal package to your package.json file using the package manager tool of your choice:

Yarn

yarn add react-onesignal

npm

npm install --save react-onesignal

Hosting the Service Worker Files

Make sure you have uploaded the necessary files you need to host for the service worker installation.

Initializing OneSignal

Initialize 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 stuff

const [initialized, setInitialized] = useState(false);
OneSignal.init({ appId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' }).then(() => {
  setInitialized(true);
  OneSignal.showSlidedownPrompt().then(() => {
    // do other stuff
  });
})

Other Initialization Options

You can pass other options to the init function. Use these options to configure personalized prompt options, auto-resubscribe, and more.

Additional Setup & Configuration Resources

See the official OneSignal WebSDK reference for information on all available SDK functions, events, and listeners.

Share Your Feedback

If you’ve had a chance to use our new ReactJS SDK and have any feedback or suggestions you’d like to share, please do reach out to us on the GitHub repository or on our Discord server.

If you encounter any bugs or technical issues while using our new ReactJS SDK, we want to know so we can make things right. Please be sure to file a report on our GitHub repository.

If you’ve found the plugin useful, we’d appreciate it if you leave us a review on G2.