React (Web)

Componentes <Paywall /> y <PaywallModal /> listos para usar en cualquier app de React. Seguros para SSR. Sin configuración más allá de una clave de API.

Instalación

bash

npm install @experiwall/react

Proveedor

Monta el proveedor una vez, cerca de la raíz de tu app.

tsx

import { ExperiwallProvider } from "@experiwall/react";

<ExperiwallProvider
  apiKey={process.env.NEXT_PUBLIC_EXPERIWALL_KEY!}
  user={{ id: currentUser.id, attributes: { plan: "free" } }}
>
  {children}
</ExperiwallProvider>

<Paywall />

Renderiza un paywall en línea. Útil para páginas de upgrade, pantallas de ajustes o cualquier lugar donde tenga sentido un paywall de página completa.

tsx

<Paywall paywallId="pro-upgrade" onSuccess={(p) => grant(p)} />

Renderiza un paywall como overlay. Se controla con una prop open, así que se integra con cualquier máquina de estados.

tsx

<PaywallModal
  paywallId="pro-upgrade"
  open={open}
  onClose={() => setOpen(false)}
  onSuccess={(p) => grant(p)}
/>

usePaywall()

¿Necesitas manejar una interfaz personalizada? usePaywall(id) devuelve la configuración resuelta, el estado de carga y una acción purchase().

Consejo

Prefiere los componentes de alto nivel cuando puedas. El hook es para casos avanzados como overlays dentro de un juego, funnels de varios pasos o renderizadores totalmente personalizados.