svix-react

Svix React

Installation

yarn add svix-react svix
# or
npm i svix-react svix

App Portal usage

import React from "react";
import ReactDOM from "react-dom";
import { AppPortal } from "svix-react";

import "svix-react/style.css";

const SvixEmbed = () => {
  const svixAppId = 'app_x'; // this might vary from customer to customer

  const [appPortal, setAppPortal] = React.useState(null);
  const svixAppPortal = React.useEffect(() => {
    // Prerequisite: You'll need an endpoint that returns the App Portal 
    // magic URL (https://api.svix.com/docs#tag/Authentication/operation/v1.authentication.app-portal-access)
    fetch(`/your-backend-service/svix/${svixAppId}/app-portal`, { method: "POST" })
      .then(res => res.json())
      .then(result => setAppPortal(result));
  }, [svixAppId]);

  return (
    <AppPortal url={appPortal?.url} />
  );
};

const App = () => (
  <SvixEmbed />
);

ReactDOM.render(<App />, document.body);

Self-sizing iframe

If you need <AppPortal /> to adjust its height based on its content (e.g. to remove scrollbars), you can pass the fullSize prop like this:

<AppPortal fullSize />

React Hooks (beta)

This library also provides some custom hooks that can be helpful when implementing a custom App Portal.

SvixProvider

To use the hooks, you must wrap your app inside the SvixProvider component:

<SvixProvider
  token={token}
  appId={appId}
>
  {/* Your app's components */}
</SvixProvider>

The token is returned by the App Portal access endpoint (docs). You will need a backend endpoint in your service that calls this endpoint and returns the token. This is not your Svix API key.

Svix hooks must be called from within the provider's hierarchy. You can also optionally pass a SvixOptions object via the options property.

Common types

You'll see most of the hooks accept and return these standardized types.

SvixPaginatedOptions

An object for controlling iteration over large sets of data

export interface SvixPaginatedOptions {
  limit?: number;
  iterator?: Iterator;
}

SvixPaginatedData

An object that allows for easy iteration over large sets of data

export interface SvixPaginatedData<T> {
  data: T[] | undefined;
  reload: () => void;
  hasPrevPage: boolean;
  hasNextPage: boolean;
  prevPage: () => void;
  nextPage: () => void;
  loading: boolean;
  error: Error | undefined;
  iterator: Iterator;
}

SvixEntity

An object for interacting with a Svix entity

interface SvixEntity<T> {
  data: T | undefined;
  reload: () => void;
  loading: boolean;
  error: Error | undefined;
}

Available hooks

Note: these hooks must be used within the SvixProvider context.

useSvix

function useSvix(): {
  svix: Svix,
  appId: string
}

useEndpoints

function useEndpoints(options?: SvixPaginatedOptions): SvixPaginatedData<EndpointOut>

useEndpoint

function useEndpoint(endpointId: string): SvixEntity<EndpointOut>

useEndpointMessageAttempts

function useEndpointMessageAttempts(endpointId: string, options?: SvixPaginatedOptionsAttempts): SvixPaginatedData<MessageAttemptOut>

useAttemptedMessages

function useAttemptedMessages(endpointId: string, options?: SvixPaginatedOptionsAttempts):
SvixPaginatedData<EndpointMessageOut>

useEndpointSecret

function useEndpointSecret(endpointId: string): {
  rotateSecret: (newSecret: EndpointSecretRotateIn) => Promise<void>
} extends SvixEntity<EndpointSecretOut>

useEndpointHeaders

function useEndpointHeaders(endpointId: string): {
  updateEndpointHeaders: (headers: EndpointHeadersIn) => Promise<void>,
  patchHeaders: (headers: EndpointHeadersPatchIn) => Promise<void>
} extends SvixEntity<EndpointHeadersOut>

useEndpointFunctions

function useEndpointFunctions(endpointId: string): {
  recoverEndpointMessages: (options: RecoverIn) => Promise<void>,
  updateEndpoint: (options: EndpointUpdate) => Promise<EndpointOut>,
  deleteEndpoint: () => Promise<void>
}

useEndpointStats

function useEndpointStats(endpointId: string): SvixEntity<EndpointStats>

useNewEndpoint

function useNewEndpoint(): {
  url: SvixField,
  description: SvixField,
  eventTypes: SvixField,
  rateLimitPerSecond: SvixField,
  createEndpoint: () => Promise<{ endpoint: EndpointOut, error: Error }>
}

useEventTypes

function useEventTypes(options?: SvixPaginatedOptions): SvixPaginatedData<EventTypeOut>

useMessages

function useMessages(options?: SvixPaginatedOptionsMessages): SvixPaginatedData<MessageOut>

useMessage

function useMessage(messageId: string): SvixEntity<MessageOut>

useMessageEndpoints

function (messageId: string, options?: SvixPaginatedOptions): SvixPaginatedData<MessageEndpointOut>

useMessageAttempts

function useMessageAttempts(messageId: string, options?: SvixPaginatedOptionsAttempts): SvixPaginatedData<MessageAttemptOut>

useAttemptFunctions

function useMessageAttemptFunctions(attempt: MessageAttemptOut): {
  resendAttempt: () => Promise<void>
}