react-image-loadr

    0.1.1 • Public • Published

    react-image-loadr

    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.

    Example

    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.

    API

    Component Properties

    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} />

    Rendering function arguments

    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

    Feature Requests

    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.

    Contributing

    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!

    Install

    npm i react-image-loadr

    DownloadsWeekly Downloads

    2

    Version

    0.1.1

    License

    MIT

    Unpacked Size

    15.6 kB

    Total Files

    9

    Last publish

    Collaborators

    • dragonraider5