@revroute/embed-react

React-компоненты для встраивания партнёрского кабинета RevRoute в ваше приложение. Пользователь видит свою реферальную ссылку, статистику и начисленное вознаграждение, не покидая ваш продукт.

Установка

npm install @revroute/embed-react

Требуется React 19 (react и react-dom — peer-зависимости).

Использование

Токен выпускается на вашем сервере — секретный API-ключ в браузер попадать не должен:

// сервер
const res = await fetch("https://app.revroute.ru/api/tokens/embed/referrals", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.REVROUTE_API_KEY}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ tenantId: user.id }),
});

const { publicToken } = await res.json();

// клиент
import { RevRouteEmbed } from "@revroute/embed-react";

export function ReferralsDashboard({ publicToken }) {
  return (
    <RevRouteEmbed
      data="referrals"
      token={publicToken}
      options={{
        theme: "system",
        themeOptions: { backgroundColor: "#f5f5f5" },
      }}
    />
  );
}

Старое имя DubEmbed (из исходного пакета @dub/embed-react) продолжает работать как алиас, но помечено deprecated и будет убрано в 1.0.

Публичный токен живёт 3 часа и привязан к одному партнёру — запрашивайте его при загрузке страницы, а не храните в базе.

Параметры

token и data передаются напрямую, остальное — внутри options. Прочие пропсы уходят на корневой <div>.

| Параметр | Тип | Описание | |---|---|---| | token | string | Публичный токен, обязателен | | data | "referrals" \| "analytics" | Что показывать | | options.theme | "light" \| "dark" \| "system" | Оформление, по умолчанию светлое | | options.themeOptions | { backgroundColor?: string } | Цвет фона под ваш интерфейс | | options.containerStyles | Partial<CSSStyleDeclaration> | Стили контейнера | | options.onError | (error: Error) => void | Обработчик ошибок |

Документация

https://revroute.ru/ru/docs/partners/embedded-referrals

Лицензия

MIT. Пакет основан на @dub/embed-react — см. LICENSE.