1.0.0 • Published 6 years ago
@matthamlin/re-load v1.0.0
re-load
Re-load is a react component for handling (psuedo-)async loading states.
Example
import Reload from '@matthamlin/re-load'
let src = 'https://my-cool-img-resource.com/img.jpg'
render(
<Reload
propName="src"
src={src}
resolver={() =>
new Promise((resolve, reject) => {
let img = new Image()
img.onload = () => resolve(img)
img.onerror = () => reject('Failed to load the image resource :(')
img.src = src
})
}
>
{({ src, meta }) =>
src === null ? (
<p> Image Loading ... </p>
) : (
<img
src={src}
height={meta.height}
width={meta.width}
alt="My Cool Image"
/>
)
}
</Reload>,
)
API
Props
propName
Required The name of the prop that will be resolvedresolver
An optional function that returns a promise, the value resolved will be set to themeta
key in the callback, and the value rejected will be set to theerror
key in the callbackdelay
An optional delay used ifresolver
isn't providedchildren
Required The callback render function for Reload, it is called with an object containing the following:
{
[this.props.propName]: null | any,
meta?: any,
error?: any
}
1.0.0
6 years ago