mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
c4b6bb8521
Add ref forwarding for next/image with integration test - fixes https://github.com/vercel/next.js/discussions/42885 - fixes https://github.com/vercel/next.js/issues/18398 (this one was closed with `onLoadingComplete`) ## Feature - [x] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [x] Related issues linked using `fixes #number` - [x] Integration tests added - [x] Documentation added Co-authored-by: Steven <[email protected]>
31 lines
652 B
JavaScript
31 lines
652 B
JavaScript
import React, { useState } from 'react'
|
|
import Image from 'next/image'
|
|
import { motion } from 'framer-motion'
|
|
import testPng from '../images/test.png'
|
|
|
|
const CustomImage = React.forwardRef((props, ref) => (
|
|
<Image
|
|
ref={ref}
|
|
id="img"
|
|
src={testPng}
|
|
width={300}
|
|
height={300}
|
|
alt="test img"
|
|
{...props}
|
|
/>
|
|
))
|
|
|
|
const MotionImage = motion(CustomImage)
|
|
|
|
export default function Page() {
|
|
const [clicked, setClicked] = useState(false)
|
|
return (
|
|
<MotionImage
|
|
onClick={() => setClicked(true)}
|
|
initial={{ opacity: 1 }}
|
|
animate={{ opacity: clicked ? 0 : 1 }}
|
|
transition={{ duration: 0.5 }}
|
|
/>
|
|
)
|
|
}
|