feat: add next-js image integration

chakra-ui · Mar 18, 2023 · 46bd146 · 46bd146 · vercel · Mar 18, 2023
1 parent 9d1335c
commit 46bd146
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 0 deletions.
diff --git a/.changeset/quiet-fireants-whisper.md b/.changeset/quiet-fireants-whisper.md
@@ -0,0 +1,6 @@
+---
+"@chakra-ui/next-js": minor
+---
+
+Add `Image` component that supercharges the Next.js optimized image with Chakra
+style props.
diff --git a/packages/integrations/next-js/src/image.tsx b/packages/integrations/next-js/src/image.tsx
@@ -0,0 +1,9 @@
+import { chakra, ChakraComponent, HTMLChakraProps } from "@chakra-ui/react"
+import NextImage, { ImageProps as NextImageProps } from "next/image"
+
+export type ImageProps = NextImageProps &
+  Omit<HTMLChakraProps<"img">, keyof NextImageProps>
+
+export const Image: ChakraComponent<"img", NextImageProps> = chakra(NextImage, {
+  shouldForwardProp: (prop) => ["width", "height", "src", "alt"].includes(prop),
+})
diff --git a/packages/integrations/next-js/src/index.ts b/packages/integrations/next-js/src/index.ts
@@ -1,4 +1,8 @@
 export { CacheProvider } from "./emotion-cache-provider"
 export type { CacheProviderProps } from "./emotion-cache-provider"
+
 export { Link } from "./link"
 export type { LinkProps } from "./link"
+
+export { Image } from "./image"
+export type { ImageProps } from "./image"