Theo's Typesafe Cult•2y ago

Wrapper around Next Image component

I am trying to built a component which uses the Next Image component inside currently I have done this, but I don't like how I pass the props down is there a better solution for this?

interface ImageFromBucket {
  props: ImageProps;
  src: string;
  alt?: string;
  className?: string;
  height?: number;
  width?: number;
  loader?: any;
}

const ImageFromBucket = ({ props, src, alt = '', className, height, width, loader }: ImageFromBucket) => {
  const [imageSrc, setImageSrc] = useState<string>(src);
  const [mutation, { error, loading }] = useMutation(GET_IMAGE);

  useEffect(() => {
    getPresignedUrlMutation({
      variables: {
        key: src,
      },
    }).then(data => {
      // ...
    });
  }, [mutation, src]);

  return <Image {...props} className={className} src={src} alt={alt} height={height} width={width} loader={loader} />;
};

export default ImageFromBucket;

interface ImageFromBucket {
  props: ImageProps;
  src: string;
  alt?: string;
  className?: string;
  height?: number;
  width?: number;
  loader?: any;
}

const ImageFromBucket = ({ props, src, alt = '', className, height, width, loader }: ImageFromBucket) => {
  const [imageSrc, setImageSrc] = useState<string>(src);
  const [mutation, { error, loading }] = useMutation(GET_IMAGE);

  useEffect(() => {
    getPresignedUrlMutation({
      variables: {
        key: src,
      },
    }).then(data => {
      // ...
    });
  }, [mutation, src]);

  return <Image {...props} className={className} src={src} alt={alt} height={height} width={width} loader={loader} />;
};

export default ImageFromBucket;

3 Replies

Ramazan•2y ago

You can do something like

export default function ImageFromBucket({ src, alt, className, height, width, loader, …props}: ImageProps) {
   …
};

export default function ImageFromBucket({ src, alt, className, height, width, loader, …props}: ImageProps) {
   …
};

utdevOP•2y ago

Just wondering why src and alt are not being passed down using ...props

Ramazan•2y ago

Hmm yeah that would be odd, you can specify the ImageFromBucketProps as extends ImageProps and add those on Wait are you trying to access those with props.src?

Gaming

Programming

Wrapper around Next Image component