https://github.com/arjunkathuria/react-smooth-image
Butter smooth loading non-jumping images for react that just work
https://github.com/arjunkathuria/react-smooth-image
image image-loading images loading react reactjs smooth
Last synced: 12 days ago
JSON representation
Butter smooth loading non-jumping images for react that just work
- Host: GitHub
- URL: https://github.com/arjunkathuria/react-smooth-image
- Owner: arjunkathuria
- License: mit
- Created: 2018-04-19T12:10:05.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2020-04-27T14:46:57.000Z (about 5 years ago)
- Last Synced: 2025-04-20T17:38:55.979Z (about 1 month ago)
- Topics: image, image-loading, images, loading, react, reactjs, smooth
- Language: JavaScript
- Homepage:
- Size: 1.22 MB
- Stars: 15
- Watchers: 1
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# React Smooth Image
Are you tired of your react app's layout flashing around because an
image is yet to load and its taking zero space until then?
Does the progressive image loading from top bottom makes you cringe ?
You wish there was something neat out there that `just works` ?
Yea, mee too.
```
"Fear not, for i am here"
- All Might.
```
## Demo
First one is a normal image, the second one is using `react-smooth-image`.
 
## Install
```
$ npm install --save react-smooth-image
```
if you prefer to use yarn then
```
$ yarn add react-smooth-image
```
## Usage
````js
import SmoothImage from 'react-smooth-image';
.
.
.
render() {
return (
)
}
````
## Props
#### src
type: string
is mandatory: yes
Description: The source url of the image to be loaded.
#### alt
type: string
is mandatory: yes
Description: The `alt` text to be passed to the image. Facilitates accessibility and screen readers and including this is always a good idea.
#### placeholderImgUrl
type: string
is mandatory: no
default value: ''
Description: if you wanna use a placeholder image, you may pass the url here or pass an embedded image data.
#### containerStyles
type: object
is mandatory: no
Description: If you want to overwrite the container styles, pass a js style object to it like you would pass in a style attribute in a regular react element.
#### imageStyles
type: object
is mandatory: no
Description: If you want to overwrite the image styles, pass a style object in this prop.
#### transitionTimingFunction
type: string
is mandatory: no
default value: "ease-in"
Description: The css transition-timing function to use when the image is loaded.
#### transitionTime
type: number
is mandatory: no
default value: 0.3s
Description: The time for the image to apply the given transition in seconds. For eg 0.3