diff --git a/packages/next/src/NextVisual.tsx b/packages/next/src/NextVisual.tsx index 02a834e..8432227 100644 --- a/packages/next/src/NextVisual.tsx +++ b/packages/next/src/NextVisual.tsx @@ -8,7 +8,7 @@ import { collectDataAttributes, } from '@react-visual/react' -import { NextVisualProps, ObjectFit } from './types/nextVisualTypes' +import { NextVisualProps } from './types/nextVisualTypes' // Render a Sanity image via Next/Image export default function NextVisual( @@ -24,7 +24,7 @@ export default function NextVisual( aspect, width, height, - fit = ObjectFit.Cover, + fit = 'cover', position, priority, sizes, diff --git a/packages/next/src/index.ts b/packages/next/src/index.ts index 706078b..9d7cc01 100644 --- a/packages/next/src/index.ts +++ b/packages/next/src/index.ts @@ -1,3 +1,7 @@ import NextVisual from './NextVisual' export default NextVisual -export { NextVisualProps, ObjectFit } from './types/nextVisualTypes' +export { + NextVisualProps, + ObjectFit, + ObjectFitOption, +} from './types/nextVisualTypes' diff --git a/packages/next/src/types/nextVisualTypes.ts b/packages/next/src/types/nextVisualTypes.ts index c424e22..8a23dfa 100644 --- a/packages/next/src/types/nextVisualTypes.ts +++ b/packages/next/src/types/nextVisualTypes.ts @@ -10,7 +10,7 @@ export type NextVisualProps = { aspect?: number // An explict aspect ratio width?: number | string height?: number | string - fit?: ObjectFit + fit?: ObjectFitOption | ObjectFit position?: string priority?: boolean @@ -23,6 +23,9 @@ export type NextVisualProps = { style?: CSSProperties } +export type ObjectFitOption = 'cover' | 'contain' + +// Deprecated export enum ObjectFit { Cover = 'cover', Contain = 'contain', diff --git a/packages/sanity-next/src/index.ts b/packages/sanity-next/src/index.ts index 57fcd08..656f9d2 100644 --- a/packages/sanity-next/src/index.ts +++ b/packages/sanity-next/src/index.ts @@ -1,4 +1,5 @@ import SanityNextVisual from './SanityNextVisual' export default SanityNextVisual export { SanityNextVisualProps } from './types/sanityNextVisualTypes' +export { ObjectFitOption } from '@react-visual/next' export { makeImageUrl, makeImageBuilder, makeFileUrl } from './lib/urlBuilding' diff --git a/packages/sanity-next/src/lib/urlBuilding.ts b/packages/sanity-next/src/lib/urlBuilding.ts index 665a97e..962bc32 100644 --- a/packages/sanity-next/src/lib/urlBuilding.ts +++ b/packages/sanity-next/src/lib/urlBuilding.ts @@ -3,7 +3,7 @@ import { getFileAsset, type SanityFileSource } from '@sanity/asset-utils' import type { ImageUrlBuilder } from '@sanity/image-url/lib/types/builder' import type { ImageLoader, ImageLoaderProps } from 'next/image' import type { SanityImageSource } from '@sanity/image-url/lib/types/types' -import { ObjectFit } from '@react-visual/next' +import { ObjectFitOption } from '@react-visual/next' // Access ENV vars const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID as string, @@ -16,7 +16,7 @@ const imageBuilder = createImageUrlBuilder({ projectId, dataset }) type imageUrlBuildingOptions = { width?: number height?: number - fit?: ObjectFit + fit?: ObjectFitOption } // Helper for making image URLs @@ -30,7 +30,7 @@ export function makeImageUrl( // Add common conventions when building URLs to images export function makeImageBuilder(source: SanityImageSource, { - width, height, fit = ObjectFit.Contain + width, height, fit = 'contain' }: imageUrlBuildingOptions = {}): ImageUrlBuilder { // Open up builder @@ -39,7 +39,7 @@ export function makeImageBuilder(source: SanityImageSource, { // Map the ObjectFit values to Sanity image CDN equivalents. The default // is 'max'. // https://www.sanity.io/docs/image-urls#fit-45b29dc6f09f - builder = builder.fit(fit == ObjectFit.Cover ? 'min' : 'max') + builder = builder.fit(fit == 'cover' ? 'min' : 'max') // Conditionally add dimensions if (width) builder = builder.width(width)