{"library":"react-onesignal","title":"React OneSignal Integration","description":"react-onesignal is a JavaScript/TypeScript module designed to streamline the integration of OneSignal's push notification, web push, and in-app messaging services into web applications. Currently at version 3.5.1, the library receives frequent patch and minor updates, indicating active development. While its name suggests a React-specific use, the library's documentation explicitly states it can be used in virtually any JavaScript front-end codebase. It acts as a wrapper around the OneSignal Web SDK, abstracting the direct script loading and providing a convenient, promise-based `init` method to configure the SDK. Key differentiators include its React-friendly API, managed script loading (with an option to override the script source), and strong TypeScript support, simplifying the development experience for push notification capabilities.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-onesignal"],"cli":null},"imports":["import OneSignal from 'react-onesignal';","import type { IDisplayableOSNotification } from 'react-onesignal';","await OneSignal.init({ appId: 'YOUR_APP_ID' });\nOneSignal.Slidedown.promptPush();"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState, useEffect } from 'react';\nimport OneSignal from 'react-onesignal';\n\nfunction PushNotificationHandler() {\n  const [initialized, setInitialized] = useState(false);\n\n  useEffect(() => {\n    const initializeOneSignal = async () => {\n      try {\n        await OneSignal.init({\n          appId: process.env.ONE_SIGNAL_APP_ID ?? 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',\n          safari_web_id: process.env.ONE_SIGNAL_SAFARI_WEB_ID ?? '',\n          notifyButton: {\n            enable: true,\n          },\n          allowLocalhostAsSecureOrigin: true,\n        });\n        setInitialized(true);\n        console.log('OneSignal initialized successfully');\n        \n        // You can prompt for push notifications here after initialization\n        // OneSignal.Slidedown.promptPush();\n\n      } catch (error) {\n        console.error('Failed to initialize OneSignal:', error);\n      }\n    };\n\n    if (!initialized) {\n      initializeOneSignal();\n    }\n  }, [initialized]);\n\n  if (!initialized) {\n    return <div>Loading push notifications...</div>;\n  }\n\n  return (\n    <div>\n      <h1>Push Notifications Ready</h1>\n      <p>OneSignal SDK is initialized and ready to use.</p>\n      <button onClick={() => OneSignal.Slidedown.promptPush()}>Show Push Prompt</button>\n    </div>\n  );\n}\n\nexport default PushNotificationHandler;","lang":"typescript","description":"This example demonstrates how to initialize OneSignal using the `init` function within a React component's `useEffect` hook, ensuring it's called only once. It shows how to await the initialization promise and conditionally render content based on the SDK's readiness.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}