English

Pushizo for React — React bindings for the Pushizo Web SDK. PushizoProvider initializes the shared SDK once in the browser (SSR safe, no double init under StrictMode); usePushizo returns the SDK, and hooks expose the notification permission and push subscription state from the SDK observers. React 18 and 19, Next.js App Router ready.

Status: @pushizo/react 0.1.0 is not on npm yet; until then you can install the release archive from this repository. Durum: @pushizo/react 0.1.0 henüz npm'de değil; o zamana kadar bu deponun sürüm arşivinden kurabilirsiniz.

Install from GitHub until then · O zamana kadar GitHub'dan kurulum:

npm install @pushizo/web --allow-remote=root https://github.com/pushizo/pushizo-react/releases/download/v0.1.0/pushizo-react-0.1.0.tgz

After publication · Yayından sonra:

npm install @pushizo/react @pushizo/web

The detailed guide below is in Turkish; code samples are language-neutral. Full documentation: docs.pushizo.com/docs/integrations/react · API reference: docs.pushizo.com/docs/api.

Türkçe

@pushizo/react

Pushizo Web SDK'sı (@pushizo/web) için React bağlamaları: tek bir PushizoProvider paylaşılan SDK örneğini tarayıcıda bir kez başlatır, hook'lar izin ve push abonelik durumunu web SDK'nın gözlemcilerinden okur.

• SSR güvenli: sunucuda (Next.js, Remix) init çağrılmaz, gözlemci bağlanmaz; hidrasyon sabit bir başlangıç durumuyla yapılır.
• React StrictMode'un geliştirmedeki çift efekti SDK'yı ikinci kez başlatmaz.
• Bileşen sökülünce izin/abonelik gözlemcileri ve tıklama dinleyicileri kaldırılır.
• React 18 ve 19 (useSyncExternalStore); Next.js App Router için paket 'use client' ile işaretlidir.

Kurulum

npm install @pushizo/react @pushizo/web

Service worker site kökünde olmalıdır (public/PushizoSDKWorker.js):

// public/PushizoSDKWorker.js
const apiUrl = new URL(self.location.href).searchParams.get('apiUrl') || 'https://api.pushizo.com';
importScripts(`${apiUrl.replace(/\/$/, '')}/sdk-web/PushizoSDKWorker.js`);

Kullanım

// main.tsx (Vite) veya app/providers.tsx (Next.js, 'use client')
import { PushizoProvider } from '@pushizo/react';

const options = { appId: 'app_…', serviceWorkerPath: '/PushizoSDKWorker.js' };

export function Providers({ children }: { children: React.ReactNode }) {
  return <PushizoProvider options={options}>{children}</PushizoProvider>;
}

import { useNotificationPermission, usePushizo, usePushizoState, usePushSubscription } from '@pushizo/react';

export function PushToggle() {
  const pushizo = usePushizo();
  const { ready, error } = usePushizoState();
  const permission = useNotificationPermission(); // 'default' | 'granted' | 'denied' | 'unsupported'
  const subscription = usePushSubscription(); // { id, token, optedIn, permission }

  if (error) return <p role="alert">{error.message}</p>;
  if (!ready) return <p>Yükleniyor…</p>;
  if (permission === 'unsupported') return <p>Bu tarayıcı web push desteklemiyor.</p>;
  if (permission === 'denied') return <p>Bildirimler tarayıcı ayarlarından engellenmiş.</p>;
  return subscription.optedIn ? (
    <button onClick={() => void pushizo.User.pushSubscription.optOut()}>Bildirimleri kapat</button>
  ) : (
    <button onClick={() => void pushizo.Notifications.requestPermission()}>Bildirimlere izin ver</button>
  );
}

Bildirim tıklaması:

import { useNotificationClick } from '@pushizo/react';

useNotificationClick(({ notification, result }) => {
  router.push(result.url ?? notification.url ?? '/');
});

API

| Ad | Açıklama | |----|----------| | <PushizoProvider options> | Pushizo.init(options) çağrısını tarayıcıda bir kez yapar; yalnızca ilk options kullanılır. | | usePushizo() | Paylaşılan SDK örneği: login, logout, User.addTags, Session.sendEvent, Inbox … | | usePushizoState() | { ready, error, permission, pushSubscription } | | useNotificationPermission() | Tarayıcı bildirim izni. | | usePushSubscription() | Push abonelik durumu. | | useNotificationClick(handler) | Bildirim tıklaması dinleyicisi; sökülünce kaldırılır. |

init hatası (ör. eksik appId) fırlatılmaz, usePushizoState().error alanına yazılır. Hook'lar provider dışında açıklayıcı bir hata verir. SDK'nın tüm yüzeyi için Web SDK rehberi.

Ayrıntılı rehber (login/logout, tag ve olaylar, bildirim kutusu, Next.js): React rehberi.

Support · Destek

• Guide · Rehber: docs.pushizo.com/docs/integrations/react
• API reference & OpenAPI · API referansı ve OpenAPI: docs.pushizo.com/docs/api · pushizo-openapi
• Bugs & ideas · Hata ve öneri: Issues
• Security · Güvenlik: please do not open public issues; email [email protected] · herkese açık issue açmayın, bu adrese yazın.
• Help · Destek: [email protected]

This repository is mirrored automatically from the Pushizo main repository on every release. Please open an issue instead of a pull request; fixes land in the main repository and ship with the next release. Bu depo her sürümde Pushizo ana deposundan otomatik yansıtılır. Pull request yerine issue açın; düzeltmeler ana depoda yapılır ve bir sonraki sürümle buraya gelir.

Released under the MIT License · MIT lisanslıdır — LICENSE.