archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

docs(image): Use hook inside of function component (#40096)

Browse source 
The example broke the [Rules of Hooks](https://reactjs.org/warnings/invalid-hook-call-warning.html#:~:text=Hooks%20can%20only%20be%20called%20inside%20the%20body%20of%20a%20function%20component.) by calling the hook outside of the function component.

Co-authored-by: JJ Kasper <jj@jjsweb.site>
This commit is contained in:
Dueen Eduarda 2022-08-30 17:22:55 +02:00 committed by GitHub
parent 1bf2ab6a66
commit b760c8dd0a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
docs/api-reference/next/image.md
View file

@ -279,14 +279,16 @@ The Ref must point to a DOM element or a React component that [forwards the Ref]
import Image from 'next/image'
import React from 'react'
const lazyRoot = React.useRef(null)
const Example = () => {
const lazyRoot = React.useRef(null)
const Example = () => (
<div ref={lazyRoot} style={{ overflowX: 'scroll', width: '500px' }}>
<Image lazyRoot={lazyRoot} src="/one.jpg" width="500" height="500" />
<Image lazyRoot={lazyRoot} src="/two.jpg" width="500" height="500" />
</div>
)
return (
<div ref={lazyRoot} style={{ overflowX: 'scroll', width: '500px' }}>
<Image lazyRoot={lazyRoot} src="/one.jpg" width="500" height="500" />
<Image lazyRoot={lazyRoot} src="/two.jpg" width="500" height="500" />
</div>
)
}
```
**Example pointing to a React component**