https://github.com/oberonamsterdam/react-image-loading

Load an image in React with loading placeholder and fallback
https://github.com/oberonamsterdam/react-image-loading

Last synced: 2 months ago
JSON representation

Load an image in React with loading placeholder and fallback

• Host: GitHub
• URL: https://github.com/oberonamsterdam/react-image-loading
• Owner: oberonamsterdam
• Created: 2018-06-15T15:41:53.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-08-20T17:54:12.000Z (over 2 years ago)
• Last Synced: 2024-11-03T17:43:44.505Z (3 months ago)
• Language: TypeScript
• Size: 13.7 KB
• Stars: 3
• Watchers: 6
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# React Image Loading

Load an image in React with loading placeholder and fallback, with maximum customizability.

## Installation

`npm i react-image-loading`

## Quick usage

This will render the out of the box implementation of the ImageLoading component, including a

loading placeholder and fallback that have absolute positioning to fill the dimensions

of the parent container. See below on how to implement custom rendering and behavior.

```js

import { Img } from 'react-image-loading';

const MyComponent = props =>

    


        

    

```


## Custom implementation

The out of the box Img provides a basic use case for loading images with a loading placeholder

and fallback. To customize you can implement your own version of the Img component specific to

your project needs. Below is an example that mimics the basic behavior of the provided Img component, 

but changes the color of the Fallback and LoadingPlaceholder:

```js

import * as React from 'react';

import ImageLoading, { Fallback, LoadingPlaceholder } from 'react-image-loading';

const Img = (props) => (

    

        {(ref, status) => (

            

                {status === 'error' || !props.src

                    ? 

                    : 

                        

                        

                    

                }

            

        )}

    

);

export default Img;

```

You can also choose to create your own implementations of the Fallback and LoadingPlaceholder, or

implement an entirely different logic altogether. 

Note: rendering the image tag with the provided ref is what triggers the loading of the image. 

## API

### ``

**Props**

- `children` **[RenderPropsFn](#renderpropsfn)**

### `RenderPropsFn`

Type: **Function**

**Params**

- `ref` **[Ref](#ref)**

- `status` **[LoadState](#loadstate)**

**Returns**

**React.ReactNode**

### `Ref`

Type: Function

**Params**

- `imageElement` **HTMLImageElement | null**

**Returns**

**void**

### `LoadState`

The loading state of the image. Will always start at "loading", even before first render of the image, so it will

immediately be put into loading state. 

Type: `'loading' | 'complete' | 'error'`

### ``

**Props**

- `style` **React.CSSProperties?**

- `animationStyle` **React.CSSProperties?**

- `animationDuration` **number?** Loop duration in ms

- `animate` **boolean?**

### ``

**Props**

- `style` **React.CSSProperties?**