yarn add svix-react svix
# or
npm i svix-react svix
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#operation/get_dashboard_access_api_v1_auth_dashboard_access__app_id___post)
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);
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 />
This library also provides some custom hooks that can be helpful when implementing a custom App Portal.
To use the hooks, you must wrap your app inside the SvixProvider component:
<SvixProvider
token={token}
appId={appId}
>
{/* Your app's components */}
</SvixProvider>
Svix hooks must be called from within the provider's hierarchy. You can also optionally pass a SvixOptions
object via the options
property.
You'll see most of the hooks accept and return these standardized types.
An object for controlling iteration over large sets of data
export interface SvixPaginatedOptions {
limit?: number;
iterator?: Iterator;
}
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;
}
An object for interacting with a Svix entity
interface SvixEntity<T> {
data: T | undefined;
reload: () => void;
loading: boolean;
error: Error | undefined;
}
Note: these hooks must be used within the SvixProvider
context.
function useSvix(): {
svix: Svix,
appId: string
}
function useEndpoints(options?: SvixPaginatedOptions): SvixPaginatedData<EndpointOut>
function useEndpoint(endpointId: string): SvixEntity<EndpointOut>
function useEndpointMessageAttempts(endpointId: string, options?: SvixPaginatedOptionsAttempts): SvixPaginatedData<MessageAttemptOut>
function useAttemptedMessages(endpointId: string, options?: SvixPaginatedOptionsAttempts):
SvixPaginatedData<EndpointMessageOut>
function useEndpointSecret(endpointId: string): {
rotateSecret: (newSecret: EndpointSecretRotateIn) => Promise<void>
} extends SvixEntity<EndpointSecretOut>
function useEndpointHeaders(endpointId: string): {
updateEndpointHeaders: (headers: EndpointHeadersIn) => Promise<void>,
patchHeaders: (headers: EndpointHeadersPatchIn) => Promise<void>
} extends SvixEntity<EndpointHeadersOut>
function useEndpointFunctions(endpointId: string): {
recoverEndpointMessages: (options: RecoverIn) => Promise<void>,
updateEndpoint: (options: EndpointUpdate) => Promise<EndpointOut>,
deleteEndpoint: () => Promise<void>
}
function useEndpointStats(endpointId: string): SvixEntity<EndpointStats>
function useNewEndpoint(): {
url: SvixField,
description: SvixField,
eventTypes: SvixField,
rateLimitPerSecond: SvixField,
createEndpoint: () => Promise<{ endpoint: EndpointOut, error: Error }>
}
function useEventTypes(options?: SvixPaginatedOptions): SvixPaginatedData<EventTypeOut>
function useMessages(options?: SvixPaginatedOptionsMessages): SvixPaginatedData<MessageOut>
function useMessage(messageId: string): SvixEntity<MessageOut>
function (messageId: string, options?: SvixPaginatedOptions): SvixPaginatedData<MessageEndpointOut>
function useMessageAttempts(messageId: string, options?: SvixPaginatedOptionsAttempts): SvixPaginatedData<MessageAttemptOut>
function useMessageAttemptFunctions(attempt: MessageAttemptOut): {
resendAttempt: () => Promise<void>
}