At Svix, we value developer experience. That's why we release our client library across a wide range of languages, including JavaScript/TypeScript. And today, we're bolstering our tooling in one of the most popular JavaScript frontend frameworks: React. Many Svix users are interested in building custom, branded Consumer App Portals for their customers, usually by theming and embedding our hosted Consumer App Portal as an iFrame. This works great for most use-cases, but sometimes our users need more granular control over structure and appearance and decide to build their own Portal as a part of their existing application. We're excited to offer a new, powerful tool to help ease development in this area: React Hooks, available in the latest version of our library. svix-react The hooks are an abstraction over our standard JavaScript client library, and cover all the core functionality required to replicate the Consumer App Portal. They have been designed to manage concerns like pagination and reloading, so you can just focus on building an awesome UI. Getting started is easy. Install or update the library (and , which is a peer dependency)... svix-react svix npm i svix-react@latest svix ...and wrap your app in the SvixProvider component: import { SvixProvider } from 'svix-react' export default function App() { return ( <SvixProvider token={token} appId={appId}> {/** your app's components **/} </SvixProvider> ) } Great. Now, you can use our hooks for things like listing event types, rotating an endpoint key, and examining message attempts. Here's an example of using the hooks to list endpoints: import { useEndpoints } from 'svix-react' export default function ListEndpoints() { const endpoints = useEndpoints() return ( <div> {endpoints.error && <div>An error has occurred</div>} {endpoints.loading && <div>Loading...</div>} <ul> {endpoints.data?.map((endpoint) => ( <li>{endpoint.url}</li> ))} </ul> <button disabled={!endpoints.hasPrevPage} onClick={endpoints.prevPage}> Previous Page </button> <button disabled={!endpoints.hasNextPage} onClick={endpoints.nextPage}> Next Page </button> </div> ) } As you can see, the hook handles fetching the data and maintaining various state, including pagination, errors, and loading. useEndpoints Under the hood, our hooks are strongly typed using TypeScript. The hook returns a generic interface that's reused by other similar hooks, so you can expect the same properties and functionality across all hooks returning list data. useEndpoints In the same way, hooks fetching a single item also share a common interface. Here's an example of the hook: useEndpoint import { useEndpoint } from 'svix-react' export default function Endpoint({ endpointId }) { const endpoint = useEndpoint(endpointId) return ( <div> {endpoint.error && <div>An error has occurred</div>} {endpoint.loading && <div>Loading...</div>} {endpoint.data && ( <div> <div>{endpoint.data.url}</div> <div>{endpoint.data.description}</div> </div> )} </div> ) } All of the new hooks, along with their input options and response objects, are documented in the library's . If your app requires functionality not provided by one of the hooks, there's an escape hatch: svix-react README const { svix } = useSvix() The hook gives you access to the underlying Svix instance being used to make API calls, as if you were using the library directly. The component has already configured it with your token and appId, so it's ready for use immediately. useSvix svix SvixProvider This update to our React library will make custom Consumer App Portal development easier and quicker than ever. We can't wait to see what you build with it! Also Published Here
