Skip to content

Commit

Permalink
docs: Add onLoad event to CldImage documentation (#538)
Browse files Browse the repository at this point in the history
# Description

<!-- Include a summary of the change made and also list the dependencies
that are required if any -->

## Issue Ticket Number

Fixes #497 

## Type of change

<!-- Please select all options that are applicable. -->

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [x] Fix or improve the documentation
- [ ] This change requires a documentation update


# Checklist

<!-- These must all be followed and checked. -->

- [x] I have followed the contributing guidelines of this project as
mentioned in [CONTRIBUTING.md](/CONTRIBUTING.md)
- [x] I have created an
[issue](https://github.com/cloudinary-community/next-cloudinary/issues)
ticket for this PR
- [x] I have checked to ensure there aren't other open [Pull
Requests](https://github.com/cloudinary-community/next-cloudinary/pulls)
for the same update/change?
- [x] I have performed a self-review of my own code
- [x] I have run tests locally to ensure they all pass
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] I have made corresponding changes needed to the documentation
  • Loading branch information
mr-loop-1 authored Oct 7, 2024
1 parent ff68bf7 commit 6dbc7c9
Showing 1 changed file with 20 additions and 1 deletion.
21 changes: 20 additions & 1 deletion docs/pages/cldimage/configuration.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -1914,6 +1914,12 @@ version="1234"
example: () => (<code>{`(event) => {}`}</code>),
more: () => (<a className="whitespace-nowrap" href="https://nextjs.org/docs/pages/api-reference/components/image#onerror">More Info</a>)
},
{
prop: 'onLoad',
type: 'function',
example: () => (<code>{`(event) => {}`}</code>),
more: () => (<a className="whitespace-nowrap" href="https://nextjs.org/docs/pages/api-reference/components/image#onload">More Info</a>)
},
{
prop: 'ref',
type: 'ref',
Expand All @@ -1933,13 +1939,26 @@ until it's available, then force refresh the image instance in the DOM.
**Examples**

```jsx copy
onError={() => {
onError={(e) => {
alert('Image failed to load!')
}}
```

[Learn more about onError](https://nextjs.org/docs/pages/api-reference/components/image#onerror) on the Next.js docs.

#### `onLoad`

Callback that fires when an image loads completely and any [placeholder](/guides/placeholders) has been removed.

**Examples**

```jsx copy
onLoad((e) => {
alert("Image has loaded!")
})
```

[Learn more about onLoad](https://nextjs.org/docs/pages/api-reference/components/image#onload) on the Next.js docs.

#### `ref`

Expand Down

0 comments on commit 6dbc7c9

Please sign in to comment.