Introducing React Hooks in the Svix React library

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 svix-react library.

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 svix-react library (and svix, which is a peer dependency)...

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 useEndpoints hook handles fetching the data and maintaining various state, including pagination, errors, and loading.

Under the hood, our hooks are strongly typed using TypeScript. The useEndpoints 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.

In the same way, hooks fetching a single item also share a common interface. Here's an example of the useEndpoint hook:

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 svix-react library's README. If your app requires functionality not provided by one of the hooks, there's an escape hatch:

const { svix } = useSvix()

The useSvix hook gives you access to the underlying Svix instance being used to make API calls, as if you were using the svix library directly. The SvixProvider component has already configured it with your token and appId, so it's ready for use immediately.

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!