Introducing React Hooks in the Svix React library
Tags: news, product
Published: 2023-01-24 00:34:23

---
title: Introducing React Hooks in the Svix React library
published: true
date: 2022-09-27 00:00:00 UTC
tags: News,Product
canonical_url: https://www.svix.com/blog/introducing-hooks/
---

The Svix React library now ships with custom React Hooks to make building a custom Portal easier than ever.

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)...

```sh
npm i svix-react@latest svix
```

...and wrap your app in the SvixProvider component:

```jsx
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:

```jsx
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:

```jsx
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](https://www.npmjs.com/package/svix-react). If your app requires functionality not provided by one of the hooks, there's an escape hatch:

```javascript
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!