svix-react
v1.13.0
Published
React components for using Svix in your dashboard.
Downloads
69,592
Readme
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>
}