Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/anishmprasad/react-imgr
A Progressive image component for react applications
https://github.com/anishmprasad/react-imgr
lazyload preload-images progressive-image progressive-image-loading react react-component reactjs
Last synced: 3 months ago
JSON representation
A Progressive image component for react applications
- Host: GitHub
- URL: https://github.com/anishmprasad/react-imgr
- Owner: anishmprasad
- License: apache-2.0
- Created: 2019-03-05T10:26:09.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-02-22T18:28:04.000Z (almost 2 years ago)
- Last Synced: 2024-09-23T11:47:46.604Z (5 months ago)
- Topics: lazyload, preload-images, progressive-image, progressive-image-loading, react, react-component, reactjs
- Homepage:
- Size: 361 KB
- Stars: 5
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-imgr
A Progressive Image component for React.
### Installation
```
// with npm with react-extensions
$ npm install react-extensions
// with npm with react-compounds
$ npm install @react-compounds/image --save
// with yarn with react-compounds
$ yarn add @react-compounds/image
// with npm
$ npm install react-imgr --save
// with yarn
$ yarn add react-imgr
```
### Usage
This is the basic usage of react-dropdown
```Javascript
import Image from 'react-imgr';
import 'react-imgr/dist/styles.min.css'
```
### Props
| Name | Type | Required | Description |
| -------------- | --------- | -------- | -------------------------------- |
| src | `string` | `true` | the src of image |
| preloadSrc | `string` | `false` | the src image preload src |
| containerStyle | `object` | `false` | container css styles |
| initialBlur | `boolean` | `true` | the src initial state |
| alt | `string` | `true` | the src alt tag |
| scale | `boolean` | `false` | scale the src image |
| placeholder | `string` | `true` | the src of the placeholder image |
### Demo
[codesandbox.io](https://codesandbox.io/embed/xj5p7lzlnp)
[anishmprasad.com](https://anishmprasad.com/opensource/react-imgr)
[anishmprasad.github.io](https://anishmprasad.github.io/opensource/react-imgr)
### TODO
- [x] Optimization
- [x] CSS Polishing and Transitions
- [x] Documentation
- [x] Production Ready
- [ ] Code Cleanup
### License
Apache 2.0