イメージクロッパー

'use client';
 
import ImageCropper from '@/app/_resources/recipes/image-cropper/image-cropper';
 
export default function Demo() {
  return (
    <div className="w-2/5">
      <ImageCropper
        width={400}
        onChange={(cropperdImage) => {
          // uploadImage(cropperdImage);
        }}
      />
    </div>
  );
}

import ImageCropper from '@/app/_resources/recipes/image-cropper/image-cropper';
import { uploadImage } from '@/app/_resources/recipes/image-cropper/upload-image';
import { useForm } from 'react-hook-form';
 
type FormData = {
  avatar: string;
};
 
export default function Form() {
  const form = useForm({
    defaultValues: {
      avatar: '',
    },
  });
 
  const onSubmit = (data: FormData) => {
    uploadImage(data.avatar);
  };
 
  return (
    <form onSubmit={form.handleSubmit(onSubmit)}>
      <ImageCropper
        width={400}
        onChange={(image) => form.setValue('avatar', image)}
      />
      <button>Submit</button>
    </form>
  );
}