Skip to content

Commit

Permalink
Improve UnoptimizedImage docs (#583)
Browse files Browse the repository at this point in the history
When working with nextjs, image component has "fill" property. If not handled correctly, components in Ladle look different than on the page.
  • Loading branch information
jakubsacha authored Nov 12, 2024
1 parent eaac9e9 commit cf54d02
Showing 1 changed file with 22 additions and 2 deletions.
24 changes: 22 additions & 2 deletions packages/website/docs/nextjs.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,29 @@ export default UnoptimizedLink;
```

```tsx title=".ladle/UnoptimizedImage.tsx"
const UnoptimizedImage = (props: any) => {
return <img {...props} />;
import React from 'react';

interface UnoptimizedImageProps
extends React.ImgHTMLAttributes<HTMLImageElement> {
fill?: boolean;
}

const UnoptimizedImage: React.FC<UnoptimizedImageProps> = ({
fill,
...props
}) => {
const style: React.CSSProperties = fill
? {
position: 'absolute',
inset: '0',
width: '100%',
height: '100%',
}
: {};

return <img {...props} style={style} />;
};

export default UnoptimizedImage;
```

Expand Down

0 comments on commit cf54d02

Please sign in to comment.