CODEWITHSUNDEEP
reactjsnext.jsreact-proptypesnextjs-image
Moshe
Moshe

Reputation: 7007

PropTypes for NextJS Image Component

I am including the new Next.js Image component inside of another component like this:

import PropTypes from "prop-types";
import Image from "next/image";

const Pattern = ({ classes, src, alt, width, height, layout }) => (
  <div className={classes.wrapper}>
    <Image
      src={src}
      alt={alt}
      width={width}
      height={height}
      layout={layout}
      className={classes.img}
    />
  </div>
);

Pattern.propTypes = {
  classes: PropTypes.shape({
    wrapper: PropTypes.string,
    img: PropTypes.string,
  }),
  src: PropTypes.string,
  alt: PropTypes.string,
  layout: PropTypes.string
};

export default Pattern;

As you see, we are using prop-types. What I am having trouble figuring out is what prop type to set for width and height. Here is a sample usage of the Image component from the Next.js documentation:

<Image
  src="/me.png"
  alt="Picture of the author"
  width={500}
  height={500}
/>

I am not sure how to set this. PropTypes.number? PropTypes.object? Something else?

Upvotes: 1

Views: 8303

Answers (2)

user7396942
user7396942

Reputation:

try with string and isRequired

Pattern.propTypes = {
  width: PropTypes.number.isRequired,
}

Upvotes: 0

buzatto
buzatto

Reputation: 10382

at your doc link if you scroll to required props it says it must be an integer, for width and/or height:

The width of the image, in pixels. Must be an integer without a unit.

given that, PropTypes.number would be the correct PropTypes for both.

Upvotes: 1

Related Questions