Allow useNextSanityImage to receive a client or a config

This brings the type in line with @sanity/image-url, which accepts either type
of client as well as a plain config.

src/useNextSanityImage.ts

@@ -1,9 +1,11 @@
 import imageUrlBuilder from '@sanity/image-url';
 import {
 	SanityAsset,
+	SanityClientLike,
 	SanityImageObject,
 	SanityImageSource,
 	SanityModernClientLike,
+	SanityProjectDetails,
 	SanityReference
 } from '@sanity/image-url/lib/types/types';
 import { ImageLoader } from 'next/image';
@@ -76,26 +78,31 @@ export function getCroppedDimensions(
 	};
 }
 
+type SanityClientOrProjectDetails =
+	| SanityClientLike
+	| SanityProjectDetails
+	| SanityModernClientLike;
+
 export function useNextSanityImage(
-	sanityClient: SanityModernClientLike,
+	sanityClient: SanityClientOrProjectDetails,
 	image: SanityImageSource,
 	options?: UseNextSanityImageOptions
 ): UseNextSanityImageProps;
 
 export function useNextSanityImage(
-	sanityClient: SanityModernClientLike,
+	sanityClient: SanityClientOrProjectDetails,
 	image: null,
 	options?: UseNextSanityImageOptions
 ): null;
 
 export function useNextSanityImage(
-	sanityClient: SanityModernClientLike,
+	sanityClient: SanityClientOrProjectDetails,
 	image: SanityImageSource | null,
 	options?: UseNextSanityImageOptions
 ): UseNextSanityImageProps | null;
 
 export function useNextSanityImage(
-	sanityClient: SanityModernClientLike,
+	sanityClient: SanityClientOrProjectDetails,
 	image: SanityImageSource | null,
 	options?: UseNextSanityImageOptions
 ): UseNextSanityImageProps | null {

test/useNextSanityImage.test.ts

@@ -33,12 +33,13 @@ const DEFAULT_HOTSPOT = {
 	height: 1
 };
 
-const configuredSanityClient = createClient({
+const sanityClientConfig = {
 	projectId: PROJECT_ID,
 	dataset: DATASET,
 	useCdn: true,
 	apiVersion: '2021-10-21'
-});
+};
+const configuredSanityClient = createClient(sanityClientConfig);
 
 const generateSanityImageSource = (width: number, height: number) => ({
 	asset: {
@@ -192,4 +193,18 @@ describe('useNextSanityImage', () => {
 
 		expect(result.current).toBeNull();
 	});
+
+	test('useNextSanityImage can be used with a client configuration instead of an instantiated client', () => {
+		const image = generateSanityImageSource(DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT);
+		const { result } = renderHook(() => useNextSanityImage(sanityClientConfig, image));
+
+		const expectedWidth = DEFAULT_IMAGE_WIDTH;
+
+		expect(result.current).toEqual({
+			loader: expect.any(Function),
+			src: generateSanityImageUrl(`?q=75&fit=clip&auto=format`),
+			width: expectedWidth,
+			height: Math.round(expectedWidth / DEFAULT_IMAGE_ASPECT_RATIO)
+		});
+	});
 });