@revinel/react

React bindings for Revinel publisher integrations. Covers both integration jobs:

Render ads on your site: RevinelProvider + hooks, on top of @revinel/sdk.
Acquire advertisers: the <TierSelector> / <TierSelectorDialog> “Subscribe to advertise” widget.

Install

npm install @revinel/react

react (>=18) is a peer dependency.

Render ads

Wrap your app once, then read ads with the hooks:

import { RevinelProvider, useAd, useTracking } from "@revinel/react"

const AdSlot = () => {
  const { data: ad } = useAd({ weight: { gte: 2.5 } }) // premium placement
  const { impressionRef, getClickProps } = useTracking(ad?.id)

  if (!ad) return null // no eligible ad, render nothing

  return (
    <a ref={impressionRef} href={ad.websiteUrl} {...getClickProps()}>
      {ad.name}
    </a>
  )
}

export const Ads = () => (
  <RevinelProvider workspaceId="your-workspace-id">
    <AdSlot />
  </RevinelProvider>
)

useTracking records a viewable impression (via IntersectionObserver) and wires click tracking through getClickProps(). Use useAds({ count }) for a grid. For a layout-persistent ad that never remounts on client-side navigation, impressions fire only once per ad id. Pass resetKey set to a value that changes per page view (the current pathname) to restore one impression per page view: useTracking(ad?.id, { resetKey: pathname }).

Tier selector (acquire advertisers)

Inline:

import { TierSelector } from "@revinel/react"

;<TierSelector workspaceId="your-workspace-id" theme="auto" onCheckout={e => {}} />

Or as a controlled modal:

import { TierSelectorDialog } from "@revinel/react"

const [open, setOpen] = useState(false)
;<TierSelectorDialog open={open} onClose={() => setOpen(false)} workspaceId="your-workspace-id" />

Build your own pricing UI instead with useTiers() + useCheckout():

import { useCheckout, useTiers } from "@revinel/react"

const { data: tiers } = useTiers()
const { redirectToCheckout, isPending } = useCheckout()
// tiers[].features is { label, type }[] where type is positive | neutral | negative
// redirectToCheckout({ tierPriceId }) creates the session and navigates to Stripe

Exports

Provider: RevinelProvider, useRevinelClient
Ads: useAd, useAds, useTracking
Tiers/checkout: useTiers, useCheckout
Widgets: TierSelector, TierSelectorDialog

Every hook’s option and return types are exported (RevinelAdOptions, RevinelQueryState, …) so you can type wrappers around them.

Revinel API

Guides

SDKs

API endpoints

Install

Render ads

Tier selector (acquire advertisers)

Exports

​Install

​Render ads

​Tier selector (acquire advertisers)

​Exports

Install

Render ads

Tier selector (acquire advertisers)

Exports