@availity/hooks 5.2.0 → 6.0.1

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [6.0.1](https://github.com/Availity/availity-react/compare/@availity/hooks@6.0.0...@availity/hooks@6.0.1) (2026-06-16)
+
+
+
+# [6.0.0](https://github.com/Availity/availity-react/compare/@availity/hooks@5.2.0...@availity/hooks@6.0.0) (2026-06-12)
+
+
+* feat(hooks)!: migrate to ESM exports, vitest, and @tanstack/react-query v5 ([bab37b2](https://github.com/Availity/availity-react/commit/bab37b24f60ec88f7ade5bb23510053dae03ca38))
+
+
+### BREAKING CHANGES
+
+* Package now uses ESM exports field and requires @tanstack/react-query ^5.
+The useQuery API now uses object syntax. Status 'loading' is renamed to 'pending'.
+
+
+
 # [5.2.0](https://github.com/Availity/availity-react/compare/@availity/hooks@5.1.11...@availity/hooks@5.2.0) (2026-06-09)
 
 

package/dist/index.d.ts

@@ -0,0 +1,58 @@
+import { DependencyList, EffectCallback } from 'react';
+import { UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
+import { User, ProvidersResponse as ProvidersResponse$1, PermissionsResponse as PermissionsResponse$1, Organization as Organization$1, OrganizationsResponse as OrganizationsResponse$1, AriesPaginatedResponse } from '@availity/api-axios';
+
+/**
+ * @deprecated useEffectAsync is an anti-pattern. Use useEffect with an IIFE or extract async logic into a separate function instead.
+ */
+declare function useEffectAsync(effect: () => void, inputs?: DependencyList): void;
+
+declare function useMount(effect: EffectCallback): void;
+
+declare function useTimeout(ms?: number): boolean;
+
+declare function useToggle(initialState?: boolean): [boolean, (state?: boolean) => void];
+
+interface CurrentRegion {
+    code: string;
+    value: string;
+}
+declare function useCurrentRegion(options?: Omit<UseQueryOptions<CurrentRegion, unknown>, 'queryKey' | 'queryFn'>): UseQueryResult<CurrentRegion, unknown>;
+
+/** @deprecated Use `User` from `@availity/api-axios` instead */
+type CurrentUser = User;
+declare function useCurrentUser(options?: Omit<UseQueryOptions<User, unknown>, 'queryKey' | 'queryFn'>): UseQueryResult<User, unknown>;
+
+/** @deprecated Use `ProvidersResponse` from `@availity/api-axios` instead */
+type ProvidersResponse = ProvidersResponse$1;
+interface AvProvidersConfig {
+    customerId: string;
+    [key: string]: unknown;
+}
+declare function useProviders(config: AvProvidersConfig, options?: Omit<UseQueryOptions<ProvidersResponse, unknown>, 'queryKey' | 'queryFn'>): UseQueryResult<ProvidersResponse, unknown>;
+
+/** @deprecated Use `PermissionsResponse` from `@availity/api-axios` instead */
+type PermissionsResponse = PermissionsResponse$1;
+declare function usePermissions(config: string | string[], options?: Omit<UseQueryOptions<PermissionsResponse, unknown>, 'queryKey' | 'queryFn'>): UseQueryResult<PermissionsResponse, unknown>;
+
+/** @deprecated Use `Organization` from `@availity/api-axios` instead */
+type Organization = Organization$1;
+/** @deprecated Use `OrganizationsResponse` from `@availity/api-axios` instead */
+type OrganizationsResponse = OrganizationsResponse$1;
+declare function useOrganizations(config: Record<string, unknown>, options?: Omit<UseQueryOptions<OrganizationsResponse, unknown>, 'queryKey' | 'queryFn'>): UseQueryResult<OrganizationsResponse, unknown>;
+
+declare const useUpdateNav: () => void;
+
+interface Dimensions {
+    width: number;
+    height: number;
+}
+declare function useWindowDimensions(): Dimensions;
+
+type StashData = Record<string, unknown>;
+declare function useStash(sessionId: string, options?: Omit<UseQueryOptions<StashData, unknown>, 'queryKey' | 'queryFn'>): UseQueryResult<StashData, unknown>;
+
+/** @deprecated Use `AriesPaginatedResponse` from `@availity/api-axios` instead */
+type AriesHookBase = AriesPaginatedResponse;
+
+export { type AriesHookBase, type AvProvidersConfig, type CurrentRegion, type CurrentUser, type Dimensions, type Organization, type OrganizationsResponse, type PermissionsResponse, type ProvidersResponse, useCurrentRegion, useCurrentUser, useEffectAsync, useMount, useOrganizations, usePermissions, useProviders, useStash, useTimeout, useToggle, useUpdateNav, useWindowDimensions };

package/dist/index.js

@@ -0,0 +1,158 @@
+// src/useEffectAsync.ts
+import { useEffect } from "react";
+function useEffectAsync(effect, inputs) {
+  useEffect(() => {
+    effect();
+  }, inputs);
+}
+
+// src/useMount.ts
+import { useEffect as useEffect2 } from "react";
+function useMount(effect) {
+  useEffect2(effect, []);
+}
+
+// src/useTimeout.ts
+import { useEffect as useEffect3, useState } from "react";
+function useTimeout(ms = 0) {
+  const [ready, setReady] = useState(false);
+  useEffect3(() => {
+    let unmounted = false;
+    const timer = setTimeout(() => {
+      if (!unmounted) {
+        setReady(true);
+      }
+    }, ms);
+    return () => {
+      unmounted = true;
+      clearTimeout(timer);
+    };
+  }, [ms]);
+  return ready;
+}
+
+// src/useToggle.ts
+import { useState as useState2 } from "react";
+function useToggle(initialState = false) {
+  const [state, setState] = useState2(initialState);
+  const toggle = (newState) => {
+    if (newState !== void 0 && newState !== state) {
+      setState(newState);
+    } else if (newState === void 0) {
+      setState(!state);
+    }
+  };
+  return [state, toggle];
+}
+
+// src/useCurrentRegion.ts
+import { useQuery } from "@tanstack/react-query";
+import { avRegionsApi } from "@availity/api-axios";
+async function fetchRegion() {
+  const response = await avRegionsApi.getCurrentRegion();
+  const data = response?.data;
+  return {
+    code: data?.regions?.[0]?.id || "",
+    value: data?.regions?.[0]?.value || ""
+  };
+}
+function useCurrentRegion(options) {
+  return useQuery({ queryKey: ["region"], queryFn: fetchRegion, ...options });
+}
+
+// src/useCurrentUser.ts
+import { avUserApi } from "@availity/api-axios";
+import { useQuery as useQuery2 } from "@tanstack/react-query";
+var fetchUser = async () => avUserApi.me();
+function useCurrentUser(options) {
+  return useQuery2({ queryKey: ["user"], queryFn: fetchUser, ...options });
+}
+
+// src/useProviders.ts
+import { useQuery as useQuery3 } from "@tanstack/react-query";
+import { avProvidersApi } from "@availity/api-axios";
+var fetchProviders = async (config) => avProvidersApi.getProviders(config.customerId, config);
+function useProviders(config, options) {
+  return useQuery3({ queryKey: ["providers", config], queryFn: () => fetchProviders(config), ...options });
+}
+
+// src/usePermissions.ts
+import { useQuery as useQuery4 } from "@tanstack/react-query";
+import { avPermissionsApi } from "@availity/api-axios";
+var fetchPermissions = async (config) => avPermissionsApi.getPermissions(config);
+function usePermissions(config, options) {
+  return useQuery4({ queryKey: ["permissions", config], queryFn: () => fetchPermissions(config), ...options });
+}
+
+// src/useOrganizations.ts
+import { useQuery as useQuery5 } from "@tanstack/react-query";
+import {
+  avOrganizationsApi
+} from "@availity/api-axios";
+var fetchOrganization = async (config) => avOrganizationsApi.getOrganizations(config);
+function useOrganizations(config, options) {
+  return useQuery5({ queryKey: ["organizations", config], queryFn: () => fetchOrganization(config), ...options });
+}
+
+// src/useUpdateNav.ts
+import { useEffect as useEffect4 } from "react";
+import { useLocation } from "react-router-dom";
+import avMessage from "@availity/message-core";
+var useUpdateNav = () => {
+  const location = useLocation();
+  useEffect4(() => {
+    try {
+      avMessage.send({ event: "navChange", url: window.location.href });
+    } catch {
+    }
+  }, [location]);
+};
+var useUpdateNav_default = useUpdateNav;
+
+// src/useWindowDimensions.ts
+import { useEffect as useEffect5, useState as useState3 } from "react";
+var getWindowDimensions = () => {
+  const { innerWidth: width, innerHeight: height } = window;
+  return { width, height };
+};
+function useWindowDimensions() {
+  const [windowDimensions, setWindowDimensions] = useState3(getWindowDimensions());
+  useEffect5(() => {
+    const handleResize = () => {
+      setWindowDimensions(getWindowDimensions());
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  return windowDimensions;
+}
+
+// src/useStash.ts
+import { avStashApi } from "@availity/api-axios";
+import { useQuery as useQuery6 } from "@tanstack/react-query";
+var fetchStash = async (sessionId) => {
+  const response = await avStashApi.get(sessionId);
+  return response?.data;
+};
+function useStash(sessionId, options) {
+  return useQuery6({
+    queryKey: ["stash", sessionId],
+    queryFn: () => fetchStash(sessionId),
+    enabled: !!sessionId,
+    ...options
+  });
+}
+export {
+  useCurrentRegion,
+  useCurrentUser,
+  useEffectAsync,
+  useMount,
+  useOrganizations,
+  usePermissions,
+  useProviders,
+  useStash,
+  useTimeout,
+  useToggle,
+  useUpdateNav_default as useUpdateNav,
+  useWindowDimensions
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/hooks",
-  "version": "5.2.0",
+  "version": "6.0.1",
   "description": "A group of pre-built hooks that are common in most apps",
   "keywords": [
     "react",
@@ -17,33 +17,43 @@
     "directory": "packages/hooks"
   },
   "license": "MIT",
+  "type": "module",
   "author": "Kyle Gray <kyle.gray@availity.com>",
-  "main": "index.js",
-  "types": "index.d.ts",
   "scripts": {
     "publish": "yarn npm publish --tolerate-republish --access public",
-    "publish:canary": "yarn npm publish --access public --tag canary"
-  },
-  "dependencies": {
-    "@tanstack/react-query": "^4.36.1",
-    "prop-types": "^15.8.1"
+    "publish:canary": "yarn npm publish --access public --tag canary",
+    "build": "tsup src/index.ts --format esm --clean --dts",
+    "dev": "tsup src/index.ts --format esm --watch --dts",
+    "clean": "rm -rf dist"
   },
   "devDependencies": {
-    "@availity/api-axios": "^12.3.1",
-    "@availity/message-core": "^8.0.2",
-    "axios": "^1.13.2",
+    "@availity/api-axios": "^13.2.0",
+    "@availity/message-core": "^9.2.0",
+    "@tanstack/react-query": "^5.75.5",
+    "axios": "^1.17.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.30.0"
+    "react-router-dom": "^6.30.4",
+    "tsup": "^8.5.1"
   },
   "peerDependencies": {
-    "@availity/api-axios": "^12.0.0",
-    "@availity/message-core": "^8.0.2",
+    "@availity/api-axios": "^12.0.0 || ^13.0.0",
+    "@availity/message-core": "^8.0.2 || ^9.0.2",
+    "@tanstack/react-query": "^5.75.5",
     "axios": "^1.13.2",
-    "react": "^18.0.0",
+    "react": "^18.0.0 || ^19.0.0",
     "react-router-dom": "^6.26.0"
   },
   "publishConfig": {
     "access": "public"
+  },
+  "main": "./dist/index.js",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
   }
 }

package/project.json

@@ -4,10 +4,15 @@
   "projectType": "library",
   "targets": {
     "test": {
-      "executor": "@nx/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/hooks"],
+      "executor": "nx:run-commands",
       "options": {
-        "jestConfig": "packages/hooks/jest.config.js"
+        "command": "vitest run --project=hooks",
+        "cwd": "."
+      },
+      "configurations": {
+        "ci": {
+          "command": "vitest run --project=hooks --coverage"
+        }
       }
     },
     "version": {
@@ -22,17 +27,20 @@
     "lint": {
       "executor": "@nx/eslint:lint",
       "options": {
-        "eslintConfig": ".eslintrc.yaml",
         "silent": false,
         "fix": false,
         "cache": true,
         "cacheLocation": "./node_modules/.cache/hooks/.eslintcache",
         "maxWarnings": -1,
         "quiet": false,
-        "noEslintrc": false,
-        "hasTypeAwareRules": true,
         "cacheStrategy": "metadata"
       }
+    },
+    "build": {
+      "command": "tsup src/index.ts --format esm --dts",
+      "options": {
+        "cwd": "packages/hooks"
+      }
     }
   }
 }

package/src/index.ts

@@ -0,0 +1,20 @@
+export { default as useEffectAsync } from './useEffectAsync';
+export { default as useMount } from './useMount';
+export { default as useTimeout } from './useTimeout';
+export { default as useToggle } from './useToggle';
+export { default as useCurrentRegion } from './useCurrentRegion';
+export { default as useCurrentUser } from './useCurrentUser';
+export { default as useProviders } from './useProviders';
+export { default as usePermissions } from './usePermissions';
+export { default as useOrganizations } from './useOrganizations';
+export { default as useUpdateNav } from './useUpdateNav';
+export { default as useWindowDimensions } from './useWindowDimensions';
+export { default as useStash } from './useStash';
+
+export type { CurrentRegion } from './useCurrentRegion';
+export type { CurrentUser } from './useCurrentUser';
+export type { Dimensions } from './useWindowDimensions';
+export type { OrganizationsResponse, Organization } from './useOrganizations';
+export type { PermissionsResponse } from './usePermissions';
+export type { ProvidersResponse, AvProvidersConfig } from './useProviders';
+export type { AriesHookBase } from './types';

package/src/types.ts

@@ -0,0 +1,4 @@
+import { AriesPaginatedResponse } from '@availity/api-axios';
+
+/** @deprecated Use `AriesPaginatedResponse` from `@availity/api-axios` instead */
+export type AriesHookBase = AriesPaginatedResponse;

package/src/useCurrentRegion.ts

@@ -0,0 +1,23 @@
+import { useQuery, UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
+import { avRegionsApi, Region } from '@availity/api-axios';
+
+export interface CurrentRegion {
+  code: string;
+  value: string;
+}
+
+async function fetchRegion(): Promise<CurrentRegion> {
+  const response = await avRegionsApi.getCurrentRegion();
+  const data = response?.data as { regions?: Region[] };
+
+  return {
+    code: data?.regions?.[0]?.id || '',
+    value: data?.regions?.[0]?.value || '',
+  };
+}
+
+export default function useCurrentRegion(
+  options?: Omit<UseQueryOptions<CurrentRegion, unknown>, 'queryKey' | 'queryFn'>
+): UseQueryResult<CurrentRegion, unknown> {
+  return useQuery({ queryKey: ['region'], queryFn: fetchRegion, ...options });
+}

package/src/useCurrentUser.ts

@@ -0,0 +1,13 @@
+import { avUserApi, User } from '@availity/api-axios';
+import { useQuery, UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
+
+/** @deprecated Use `User` from `@availity/api-axios` instead */
+export type CurrentUser = User;
+
+const fetchUser = async () => avUserApi.me() as unknown as User;
+
+export default function useCurrentUser(
+  options?: Omit<UseQueryOptions<User, unknown>, 'queryKey' | 'queryFn'>
+): UseQueryResult<User, unknown> {
+  return useQuery({ queryKey: ['user'], queryFn: fetchUser, ...options });
+}

package/src/useEffectAsync.ts

@@ -0,0 +1,9 @@
+import { DependencyList, useEffect } from 'react';
+
+/**
+ * @deprecated useEffectAsync is an anti-pattern. Use useEffect with an IIFE or extract async logic into a separate function instead.
+ */
+export default function useEffectAsync(effect: () => void, inputs?: DependencyList): void {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => { effect(); }, inputs);
+}

package/src/useMount.ts

@@ -0,0 +1,6 @@
+import { EffectCallback, useEffect } from 'react';
+
+export default function useMount(effect: EffectCallback): void {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(effect, []);
+}

package/src/useOrganizations.ts

@@ -0,0 +1,22 @@
+import { useQuery, UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
+import {
+  avOrganizationsApi,
+  Organization as ApiOrganization,
+  OrganizationsResponse as ApiOrganizationsResponse,
+} from '@availity/api-axios';
+
+/** @deprecated Use `Organization` from `@availity/api-axios` instead */
+export type Organization = ApiOrganization;
+
+/** @deprecated Use `OrganizationsResponse` from `@availity/api-axios` instead */
+export type OrganizationsResponse = ApiOrganizationsResponse;
+
+const fetchOrganization = async (config: Record<string, unknown>) =>
+  avOrganizationsApi.getOrganizations(config) as unknown as OrganizationsResponse;
+
+export default function useOrganizations(
+  config: Record<string, unknown>,
+  options?: Omit<UseQueryOptions<OrganizationsResponse, unknown>, 'queryKey' | 'queryFn'>
+): UseQueryResult<OrganizationsResponse, unknown> {
+  return useQuery({ queryKey: ['organizations', config], queryFn: () => fetchOrganization(config), ...options });
+}

package/src/usePermissions.ts

@@ -0,0 +1,15 @@
+import { useQuery, UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
+import { avPermissionsApi, PermissionsResponse as ApiPermissionsResponse } from '@availity/api-axios';
+
+/** @deprecated Use `PermissionsResponse` from `@availity/api-axios` instead */
+export type PermissionsResponse = ApiPermissionsResponse;
+
+const fetchPermissions = async (config: string | string[]) =>
+  avPermissionsApi.getPermissions(config) as unknown as PermissionsResponse;
+
+export default function usePermissions(
+  config: string | string[],
+  options?: Omit<UseQueryOptions<PermissionsResponse, unknown>, 'queryKey' | 'queryFn'>
+): UseQueryResult<PermissionsResponse, unknown> {
+  return useQuery({ queryKey: ['permissions', config], queryFn: () => fetchPermissions(config), ...options });
+}

package/src/useProviders.ts

@@ -0,0 +1,20 @@
+import { useQuery, UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
+import { avProvidersApi, ProvidersResponse as ApiProvidersResponse } from '@availity/api-axios';
+
+/** @deprecated Use `ProvidersResponse` from `@availity/api-axios` instead */
+export type ProvidersResponse = ApiProvidersResponse;
+
+export interface AvProvidersConfig {
+  customerId: string;
+  [key: string]: unknown;
+}
+
+const fetchProviders = async (config: AvProvidersConfig) =>
+  avProvidersApi.getProviders(config.customerId, config) as unknown as ProvidersResponse;
+
+export default function useProviders(
+  config: AvProvidersConfig,
+  options?: Omit<UseQueryOptions<ProvidersResponse, unknown>, 'queryKey' | 'queryFn'>
+): UseQueryResult<ProvidersResponse, unknown> {
+  return useQuery({ queryKey: ['providers', config], queryFn: () => fetchProviders(config), ...options });
+}

package/src/useStash.ts

@@ -0,0 +1,21 @@
+import { avStashApi } from '@availity/api-axios';
+import { useQuery, UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
+
+export type StashData = Record<string, unknown>;
+
+const fetchStash = async (sessionId: string) => {
+  const response = await avStashApi.get(sessionId);
+  return response?.data;
+};
+
+export default function useStash(
+  sessionId: string,
+  options?: Omit<UseQueryOptions<StashData, unknown>, 'queryKey' | 'queryFn'>
+): UseQueryResult<StashData, unknown> {
+  return useQuery({
+    queryKey: ['stash', sessionId],
+    queryFn: () => fetchStash(sessionId),
+    enabled: !!sessionId,
+    ...options,
+  });
+}

package/src/{useTimeout.js → useTimeout.ts}

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-export default function useTimeout(ms = 0) {
+export default function useTimeout(ms = 0): boolean {
   const [ready, setReady] = useState(false);
 
   useEffect(() => {

package/src/{useToggle.js → useToggle.ts}

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 
-export default function useToggle(initialState = false) {
+export default function useToggle(initialState = false): [boolean, (state?: boolean) => void] {
   const [state, setState] = useState(initialState);
-  const toggle = (newState) => {
+  const toggle = (newState?: boolean) => {
     if (newState !== undefined && newState !== state) {
       setState(newState);
     } else if (newState === undefined) {

package/src/{useUpdateNav.js → useUpdateNav.ts}

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import avMessage from '@availity/message-core';
 
-const useUpdateNav = () => {
+const useUpdateNav = (): void => {
   const location = useLocation();
 
   useEffect(() => {

package/src/{useWindowDimensions.js → useWindowDimensions.ts}

@@ -1,14 +1,16 @@
 import { useEffect, useState } from 'react';
 
-const getWindowDimensions = () => {
+export interface Dimensions {
+  width: number;
+  height: number;
+}
+
+const getWindowDimensions = (): Dimensions => {
   const { innerWidth: width, innerHeight: height } = window;
-  return {
-    width,
-    height,
-  };
+  return { width, height };
 };
 
-const useWindowDimensions = () => {
+export default function useWindowDimensions(): Dimensions {
   const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
 
   useEffect(() => {
@@ -21,6 +23,4 @@ const useWindowDimensions = () => {
   }, []);
 
   return windowDimensions;
-};
-
-export default useWindowDimensions;
+}

package/stories/ResourceComponent.tsx

@@ -1,19 +1,21 @@
 import React from 'react';
 import { Card, CardBody, CardTitle } from 'reactstrap';
 
-type Props = {
-  data: Record<string, unknown>;
+type Props<TData> = {
+  data: TData;
   loading: boolean;
   title?: string;
 };
 
-const ResourceComponent = ({ data, loading, title = '' }: Props): JSX.Element => (
-  <Card body>
-    <CardTitle className="text-center" tag="h4">
-      {title}
-    </CardTitle>
-    <CardBody>{loading ? 'Loading...' : <pre>{JSON.stringify(data, null, 2)}</pre>}</CardBody>
-  </Card>
-);
+function ResourceComponent<TData>({ data, loading, title = '' }: Props<TData>) {
+  return (
+    <Card body>
+      <CardTitle className="text-center" tag="h4">
+        {title}
+      </CardTitle>
+      <CardBody>{loading ? 'Loading...' : <pre>{JSON.stringify(data, null, 2)}</pre>}</CardBody>
+    </Card>
+  );
+}
 
 export default ResourceComponent;

package/tests/useCurrentRegion.test.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { waitFor, cleanup } from '@testing-library/react';
+import { QueryClient } from '@tanstack/react-query';
+import { http, HttpResponse } from 'msw';
+import { server } from '@availity/mock/src/server';
+import { REGIONS } from '@availity/mock/src/routes';
+import { useCurrentRegion } from '../src/index';
+import renderWithClient from './util';
+
+const queryClient = new QueryClient();
+
+afterEach(() => {
+  cleanup();
+  queryClient.clear();
+});
+
+const Component = () => {
+  const { data, error, status } = useCurrentRegion({ gcTime: 0, retry: false });
+
+  return (
+    <div>
+      <h1>Status: {status}</h1>
+      <h1>Data: {JSON.stringify(data)}</h1>
+      <h1>Error: {error?.message}</h1>
+    </div>
+  );
+};
+
+describe('useCurrentRegion', () => {
+  test('handle error', async () => {
+    server.use(http.get(REGIONS, () => HttpResponse.error()));
+
+    const { getByText } = renderWithClient(queryClient, <Component />);
+
+    getByText('Status: pending');
+    await waitFor(() => {
+      expect(getByText('Status: error')).toBeDefined();
+    });
+  });
+
+  test('handle success', async () => {
+    const { getByText } = renderWithClient(queryClient, <Component />);
+
+    getByText('Status: pending');
+    await waitFor(() => {
+      expect(getByText(`Data: ${JSON.stringify({ code: 'FL', value: 'Florida' })}`)).toBeDefined();
+    });
+  });
+});