Feat / Refactor - Utility function to return object literals as sizes for Next.js Image Component

src/components/Media/Image/index.tsx

@@ -1,18 +1,15 @@
 'use client'
 
+import type { MediaProps } from '@components/Media/types'
 import type { StaticImageData } from 'next/image'
 
+import { standardSizes } from '@utilities/image-sizes'
 import NextImage from 'next/image'
-import React, { useState } from 'react'
+import React from 'react'
 
-import type { Props } from '../types'
-
-import cssVariables from '../../../../cssVariables.cjs'
 import classes from './index.module.scss'
 
-const { breakpoints } = cssVariables
-
-export const Image: React.FC<Props> = (props) => {
+export const Image: React.FC<MediaProps> = (props) => {
   const {
     alt: altFromProps,
     fill,
@@ -27,12 +24,13 @@ export const Image: React.FC<Props> = (props) => {
     width: widthFromProps,
   } = props
 
-  const [isLoading, setIsLoading] = useState(true)
+  const [isLoading, setIsLoading] = React.useState(true)
 
   let width: null | number | undefined = widthFromProps
   let height: null | number | undefined = heightFromProps
   let alt = altFromProps
   let src: null | StaticImageData | string | undefined = srcFromProps
+  const sizes = sizesFromProps || standardSizes
 
   const hasDarkModeFallback =
     resource?.darkModeFallback &&
@@ -47,13 +45,6 @@ export const Image: React.FC<Props> = (props) => {
     src = resource.url
   }
 
-  // NOTE: this is used by the browser to determine which image to download at different screen sizes
-  const sizes =
-    sizesFromProps ||
-    Object.entries(breakpoints)
-      .map(([, value]) => `(max-width: ${value}px) ${value}px`)
-      .join(', ')
-
   const baseClasses = [
     isLoading && classes.placeholder,
     classes.image,

src/components/Media/types.ts

@@ -2,7 +2,7 @@ import type { StaticImageData } from 'next/image'
 import type { TypedUploadCollection, UploadCollectionSlug } from 'payload'
 import type { ElementType, Ref } from 'react'
 
-export interface Props {
+export interface MediaProps {
   alt?: string
   className?: string
   fill?: boolean // for NextImage only

src/utilities/image-sizes.ts

@@ -0,0 +1,26 @@
+/* eslint-disable */
+/* perfectionist/sort-objects complaining about order of breakpoints */
+
+/**
+ * Formats object literals into strings that conform
+ * to Next.js's `sizes` prop for the Image component.
+ * 
+ * The utility function `stringifyBreakpoints({size: number})` 
+ * can be imported to create custom breakpoints for specific
+ * `Image` components if needed.
+ * 
+ */
+
+type Breakpoint = {
+  [size: string]: number
+}
+
+export const stringifyBreakpoints = <B extends Breakpoint>(
+  breakpoints: B
+): string => {
+  return Object.entries(breakpoints)
+    .map(([, width]) => `(max-width: ${width}px) ${width}px`)
+    .join(', ')
+}
+
+export const standardSizes = stringifyBreakpoints({s: 768, m: 1024, l: 1440})