react-imgix v9.0.0 Release Notes

Release Date: 2019-11-01 // over 4 years ago
  • ๐Ÿš€ This release brings the react-imgix API more in-line with that of imgix's rendering service.

    0๏ธโƒฃ The largest change users will notice is that this project's component will no longer generate a default fit=crop parameter. The original intention behind this was that generated images would maintain aspect ratio when at least one of the dimensions were specified. However, the default imgix API behavior sets fit=clip, which is now reflected in this project. ๐Ÿš€ Although this may not cause breaking changes for all users, it can result in unusual rendered image behavior in some cases. As such, we would rather err on the side of caution and provide users the ability to opt in to these changes via a major release.

    0๏ธโƒฃ If you are currently relying on the default generation of fit=crop when rendering images, you will now have to manually specify it when invoking the component:

    <Imgix
        src="https://assets.imgix.net/examples/pione.jpg"
      sizes="100vw"
      imgixParams={{ fit: "crop" }}
    />
    

    The other major change relates to how the component determines an image's aspect ratio. Instead of appending a calculated height h= value based on specified dimensions, the URL string will now be built using the imgix aspect ratio parameter ar=. Luckily, the interface for specifying an aspect ratio is no different from before. However, users will have to pass in the fit=crop parameter in order for it to take effect:

    <Imgix
      src="http://assets.imgix.net/examples/pione.jpg"
      width={400}
        imgixParams={{ ar: "2:1", fit: "crop" }}
    />
    

    ๐Ÿ”จ Refactor

    • ๐Ÿ”จ refactor: use ar parameter instead of calculating aspect ratio (#462) (fbe8082)
    • ๐Ÿ”จ refactor: replace findDOMNode with callback refs (#476) (db3a1d7)

    ๐Ÿ› Bug Fixes

    • โœ‚ remove default fit parameter (#484) (fbe8082)

    Chore

    • ๐Ÿšš chore(clean): remove all deprecatedProps and types (#483) (d036132)