https://github.com/farbenmeer/next-image-autosize

A wrapper around next/image that does not require width and height to be specified.
https://github.com/farbenmeer/next-image-autosize

nextjs storybook

Last synced: 2 months ago
JSON representation

A wrapper around next/image that does not require width and height to be specified.

• Host: GitHub
• URL: https://github.com/farbenmeer/next-image-autosize
• Owner: farbenmeer
• Created: 2021-09-20T13:10:42.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-12-10T23:08:08.000Z (2 months ago)
• Last Synced: 2024-12-11T00:20:36.303Z (2 months ago)
• Topics: nextjs, storybook
• Language: TypeScript
• Size: 605 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# next-image-autosize

A wrapper around [next/image](https://nextjs.org/docs/api-reference/next/image) that automatically sets `width` and `height`.

This is useful in testing and development-environments where `next-image-loader` is not available (e.G. [storybook](https://storybook.js.org/)).

It will render a next/image without knowing the `width` and `height` beforehand by rendering a plain `` first, then reading out the image dimensions and replacing the `` with next/image.

## Warning

*DO NOT USE THIS IN PRODUCTION*

It will cause layout shift on two subsequent renders.

## Usage

### Storybook

```js

// .storybook/preview.js

import * as NextImage from 'next/image'

import NextImageAutosize from '@farbenmeer/next-image-autosize'

const OriginalNextImage = NextImage.default

Object.defineProperty(NextImage, 'default', {

  configurable: true,

  value: NextImageAutosize

})

```