@shopify/shop-minis-react/src/hooks/util/useImagePicker.ts

React component library for Shopify Shop Minis with Tailwind CSS v4 support (source-only, requires TypeScript)

import {useCallback} from 'react'

import {
  useImagePickerContext,
  OpenCameraParams,
  OpenGalleryParams,
} from '../../providers/ImagePickerProvider'

interface UseImagePickerReturns {
  /**
   * Opens the camera to take a photo.
   */
  openCamera: (params?: OpenCameraParams) => Promise<File>
  /**
   * Opens the gallery to select an image.
   */
  openGallery: (params?: OpenGalleryParams) => Promise<File>
}

export function useImagePicker(): UseImagePickerReturns {
  const {openCamera, openGallery} = useImagePickerContext()

  const openCameraWithQuality = useCallback(
    async ({cameraFacing, quality, customQuality}: OpenCameraParams = {}) => {
      const file = await openCamera({cameraFacing, quality, customQuality})
      return file
    },
    [openCamera]
  )

  const openGalleryWithQuality = useCallback(
    async ({quality, customQuality}: OpenGalleryParams = {}) => {
      const file = await openGallery({quality, customQuality})
      return file
    },
    [openGallery]
  )

  return {
    openCamera: openCameraWithQuality,
    openGallery: openGalleryWithQuality,
  }
}