https://github.com/martincarrera/pro-image
🖼 React native progressive image loading
https://github.com/martincarrera/pro-image
blur-image image pro-image progressive-image react-native
Last synced: 7 months ago
JSON representation
🖼 React native progressive image loading
- Host: GitHub
- URL: https://github.com/martincarrera/pro-image
- Owner: martincarrera
- License: mit
- Created: 2017-11-18T14:37:19.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-11-19T01:04:24.000Z (over 7 years ago)
- Last Synced: 2024-11-08T09:53:39.438Z (8 months ago)
- Topics: blur-image, image, pro-image, progressive-image, react-native
- Language: JavaScript
- Homepage:
- Size: 9.77 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ProImage
React native progressive image component.
## Install
``` bash
$ npm i pro-image
or
$ yarn add pro-image
```
## Usage
Simple example:
``` javascript
import ProImage from 'pro-image';
const MyImageComponent = () =>
```
### Properties
|Property|Is optional?|Default|Description|
|:---:|:---:|:---:|:---:|
|image|no|-|Image to render.|
|thumbnail|yes|null|The image to render with the same aspect ratio and the smallest resollution possible.|
|placeholder|yes|null|Placeholder image to render while the image is loading.
(Note: placeholder will not show if there's a thumbnail)|
|resizeMode|yes|cover|[Image resize mode.](https://facebook.github.io/react-native/docs/image.html#resizemode)|
|style|yes|{}|Styles for the image.|
|containerStyle|yes|{}|Styles for the image container (View).|
|duration|yes|1000 (ms)|Time in milliseconds that the fade effects lasts.|
Full example:
``` javascript
import ProImage from 'pro-image';
import placeholder from './path/to/placeholder.png';
const MyImageComponent = () =>
```
## Global properties
Set global values to all the images in your app.
### Properties
|Property|Defalut|Description|
|:---:|:---:|:---:|
|duration|1000 (ms)|Time in milliseconds that the fade effects lasts.|
|placeholder|null|Placeholder image.|
|blur|1|[Blur radius](https://facebook.github.io/react-native/docs/image.html#blurradius) for the thumbnail.|
### Usage
Customize all options:
``` javascript
import ProImage from 'pro-image';
import placeholder from './path/to/placeholder.png';
ProImage.setDefaultConfig({
duration: 500,
placeholder,
blur: 2
});
```
Changing just one value:
``` javascript
import ProImage from 'pro-image';
ProImage.setDefaultConfig({ duration: 750 });
```