A simple component for asynchronous image loading in React.
It uses the render prop pattern to provide you with the current loading state of your image.
import React from 'react'
import ImageLoader from 'react-image-loadr'
import ErrorComponent from './error'
import LoaderComponent from './loader'
export default ({ src }) => (
<ImageLoader src={src}>
{ ({ loading, image, error }) => {
if (error) {
return <ErrorComponent error={error} />
}
if (loading) {
return <LoaderComponent />
}
return (
<img src={image} alt='My asynchronously loaded image' />
)
} }
</ImageLoader>
)
This example code renders the ErrorComponent
if an error occurred (passing it
the error which was thrown), the LoaderComponent
while the image is beeing loaded
and the image when it finished loading.
Property | Description | Example |
---|---|---|
src |
The image source you'd normally pass to your img tag - most of the times the link to your image. |
'/assets/img.png' |
children |
Your render function. See the following spec for details on the passed data. | ({ image, loading }) => !loading && <img src={image} /> |
react-image-loadr
passes an object containing the current fetching state to
your rendering function. It provides you with the follwing data:
Key | Description | Type
--- | --- | ---
image
| The fetched image or null if the fetching failed/hasn't finished yet. | Image || null
loading
| Wether or not the image is currently loading. | Boolean
error
| If an error was thrown while fetching, it gets passed under this key. | Error || null
If there is any feature you'd like to see for this component, reach out to me
using the issues and mark it a [FEATURE REQUEST]
using the issue title.
I'll try to respond as fast as possible.
Any contributions (code improvements, feature implementations) are welcome. Just open a PR with your changes and a small description or the reference to an issue. I'll look to review it - as fast as possible as well.
Thanks in advance and have fun using this component!